diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 50881cc2..d9f5bf61 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -15,8 +15,8 @@
 				"@codemirror/view": "^6.40.0",
 				"@eslint/compat": "^2.0.3",
 				"@eslint/js": "^10.0.1",
-				"@fontsource/geist": "^5.2.8",
-				"@fontsource/jetbrains-mono": "^5.2.8",
+				"@fontsource-variable/geist": "^5.2.8",
+				"@fontsource-variable/jetbrains-mono": "^5.2.8",
 				"@icons-pack/svelte-simple-icons": "^7.1.0",
 				"@internationalized/date": "^3.12.0",
 				"@lucide/svelte": "^1.7.0",
@@ -805,20 +805,20 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/@fontsource/geist": {
+		"node_modules/@fontsource-variable/geist": {
 			"version": "5.2.8",
-			"resolved": "https://registry.npmjs.org/@fontsource/geist/-/geist-5.2.8.tgz",
-			"integrity": "sha512-pI54klK6vz8fVpAVyV+iODGLEzw73cs1XJqV9PIXgW8MYMmBcwK6lKKaWqJrNHwEx8ppz9cuhussb6arXQ/PVQ==",
+			"resolved": "https://registry.npmjs.org/@fontsource-variable/geist/-/geist-5.2.8.tgz",
+			"integrity": "sha512-cJ6m9e+8MQ5dCYJsLylfZrgBh6KkG4bOLckB35Tr9J/EqdkEM6QllH5PxqP1dhTvFup+HtMRPuz9xOjxXJggxw==",
 			"dev": true,
 			"license": "OFL-1.1",
 			"funding": {
 				"url": "https://github.com/sponsors/ayuhito"
 			}
 		},
-		"node_modules/@fontsource/jetbrains-mono": {
+		"node_modules/@fontsource-variable/jetbrains-mono": {
 			"version": "5.2.8",
-			"resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
-			"integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==",
+			"resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+			"integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==",
 			"dev": true,
 			"license": "OFL-1.1",
 			"funding": {
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 55b0eabf..f777ee13 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -23,8 +23,8 @@
 		"@codemirror/view": "^6.40.0",
 		"@eslint/compat": "^2.0.3",
 		"@eslint/js": "^10.0.1",
-		"@fontsource/geist": "^5.2.8",
-		"@fontsource/jetbrains-mono": "^5.2.8",
+		"@fontsource-variable/geist": "^5.2.8",
+		"@fontsource-variable/jetbrains-mono": "^5.2.8",
 		"@icons-pack/svelte-simple-icons": "^7.1.0",
 		"@internationalized/date": "^3.12.0",
 		"@lucide/svelte": "^1.7.0",
diff --git a/src/frontend/src/css/fonts.scss b/src/frontend/src/css/fonts.scss
index 18d2adb6..50b57088 100644
--- a/src/frontend/src/css/fonts.scss
+++ b/src/frontend/src/css/fonts.scss
@@ -1,13 +1,2 @@
-// Geist
-@each $i in (100, 200, 300, 400, 500, 600, 700, 800, 900) {
-  @at-root {
-    @import url("@fontsource/geist/#{$i}.css");
-  }
-}
-
-// Jetbrains Mono
-@each $i in (100, 200, 300, 400, 500, 600, 700, 800) {
-  @at-root {
-    @import url("@fontsource/jetbrains-mono/#{$i}.css");
-  }
-}
\ No newline at end of file
+@use "@fontsource-variable/geist";
+@use "@fontsource-variable/jetbrains-mono";
\ No newline at end of file
diff --git a/src/frontend/src/css/tailwind.css b/src/frontend/src/css/tailwind.css
index b92de0e8..95b9da00 100644
--- a/src/frontend/src/css/tailwind.css
+++ b/src/frontend/src/css/tailwind.css
@@ -1,18 +1,15 @@
 @import 'tailwindcss';
-
-@plugin '@tailwindcss/typography';
-
 @import 'tw-animate-css';
+@plugin '@tailwindcss/typography';
 
+/* Modern V4 Custom Variant */
 @custom-variant dark (&:is(.dark *));
 
 :root {
-	--font-sans:
-		'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
-		'Liberation Sans', sans-serif;
-	--font-mono:
-		'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Noto Mono',
-		monospace;
+	/* Fonts */
+	--font-sans: 'Geist Variable', ui-sans-serif, system-ui;
+	--font-mono: 'JetBrains Mono Variable', ui-monospace, monospace;
+
 	--radius: 0.625rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.145 0 0);
@@ -82,6 +79,10 @@
 }
 
 @theme inline {
+	/* Map font-family tokens directly */
+	--font-sans: var(--font-sans);
+	--font-mono: var(--font-mono);
+
 	--radius-sm: calc(var(--radius) - 4px);
 	--radius-md: calc(var(--radius) - 2px);
 	--radius-lg: var(--radius);
@@ -132,11 +133,14 @@
 	* {
 		@apply border-border outline-ring/50;
 	}
+	html {
+		/* Optimize for variable fonts */
+		font-variation-settings: 'wght' 400;
+		scroll-behavior: smooth;
+	}
 	body {
-		@apply bg-background text-foreground;
+		@apply bg-background text-foreground antialiased;
 		font-family: var(--font-sans);
-		-moz-osx-font-smoothing: grayscale;
-		-webkit-font-smoothing: antialiased;
 	}
 
 	/* Use JetBrains Mono for inline code and preformatted blocks */
@@ -145,6 +149,7 @@
 	samp,
 	pre {
 		font-family: var(--font-mono);
-		font-feature-settings: 'ss01' on;
+		font-feature-settings:
+			'ss01', 'ss02', 'cv01', 'cv02'; /* Enable mono ligatures/alt characters */
 	}
 }