diff --git a/web/package.json b/web/package.json
index 8218cd4..99929dd 100644
--- a/web/package.json
+++ b/web/package.json
@@ -44,5 +44,8 @@
 		"vitest": "^4.0.18",
 		"vitest-browser-svelte": "^2.0.2"
 	},
-	"dependencies": {}
+	"dependencies": {
+		"@fontsource-variable/inter": "^5.2.8",
+		"@fontsource-variable/noto-sans-sc": "^5.2.10"
+	}
 }
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 5e0584e..e7c9101 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -7,6 +7,13 @@ settings:
 importers:
 
   .:
+    dependencies:
+      '@fontsource-variable/inter':
+        specifier: ^5.2.8
+        version: 5.2.8
+      '@fontsource-variable/noto-sans-sc':
+        specifier: ^5.2.10
+        version: 5.2.10
     devDependencies:
       '@better-auth/cli':
         specifier: ~1.4.21
@@ -797,6 +804,12 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@fontsource-variable/inter@5.2.8':
+    resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
+
+  '@fontsource-variable/noto-sans-sc@5.2.10':
+    resolution: {integrity: sha512-zdk10i5HrDQTXI7ldD61zToX1fsgig8vDTsu7zB48SXOitWfuX0e5viZAwnkHuhwh096PU6X6i1AyAsbBCISpA==}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -3238,6 +3251,10 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
+  '@fontsource-variable/inter@5.2.8': {}
+
+  '@fontsource-variable/noto-sans-sc@5.2.10': {}
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
diff --git a/web/src/app.html b/web/src/app.html
index 4afbdf0..bbe9803 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -5,12 +5,6 @@
 		<meta charset="utf-8" />
 
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-
-		<!-- Inter + Noto Sans SC Fonts -->
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet" />
-
 		%sveltekit.head%
 	</head>
 
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 47310b1..ab600cb 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -2,6 +2,8 @@
 	import { page } from '$app/state';
 	import { locales, localizeHref } from '$lib/paraglide/runtime';
 	import { resolve } from '$app/paths';
+	import '@fontsource-variable/inter/wght.css';
+	import '@fontsource-variable/noto-sans-sc/wght.css';
 	import favicon from '$lib/assets/favicon.svg';
 	import '$lib/styles/global.css';