diff --git a/app/globals.css b/app/globals.css
index 45b191c..eecbde5 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -8,7 +8,7 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-portal, var(--font-geist-sans));
   --font-mono: var(--font-geist-mono);
 }
 
@@ -22,7 +22,7 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-portal, Arial, Helvetica, sans-serif);
 }
 
 /* Force native form controls to inherit the page font (Firefox/Chromium use the OS UI font for <option> otherwise). */
diff --git a/app/layout.tsx b/app/layout.tsx
index 791629d..80576a9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -74,7 +74,7 @@ export default async function RootLayout({
       italicFile     ? faceBlock(italicFile,     400, 'italic') : '',
       boldFile       ? faceBlock(boldFile,       700, 'normal') : '',
       boldItalicFile ? faceBlock(boldItalicFile, 700, 'italic') : '',
-      `\nbody { font-family: 'PortalFont', Arial, Helvetica, sans-serif; }\n`,
+      `\n:root { --font-portal: 'PortalFont', Arial, Helvetica, sans-serif; }\n`,
     ].join('');
   }