diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index c6c4498..331e37d 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -359,15 +359,15 @@ $code-color-dark:           $dk-tertiary;            // #c0c1ff
 body {
   background-color: var(--color-background);
   color: var(--color-on-surface);
-  font-family: var(--font-body);
+  font-family: var(--font-body), sans-serif;
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-display);
+  font-family: var(--font-display), serif;
 }
 
 code, kbd, pre, samp {
-  font-family: var(--font-mono);
+  font-family: var(--font-mono), monospace;
 }
 
 // =============================================================================
@@ -375,7 +375,7 @@ code, kbd, pre, samp {
 // =============================================================================
 
 .text-display-lg {
-  font-family: var(--font-display);
+  font-family: var(--font-display), serif;
   font-size: 64px;
   font-weight: 700;
   line-height: 1.1;
@@ -388,27 +388,27 @@ code, kbd, pre, samp {
 }
 
 .text-headline-md {
-  font-family: var(--font-display);
+  font-family: var(--font-display), serif;
   font-size: 32px;
   font-weight: 600;
   line-height: 1.3;
 }
 
 .text-body-lg {
-  font-family: var(--font-body);
+  font-family: var(--font-body), sans-serif;
   font-size: 18px;
   line-height: 1.6;
 }
 
 .text-body-md {
-  font-family: var(--font-body);
+  font-family: var(--font-body), sans-serif;
   font-size: 16px;
   line-height: 1.5;
 }
 
 // Primary label style (light design doc)
 .text-label-sm {
-  font-family: var(--font-mono);
+  font-family: var(--font-mono), monospace;
   font-size: 13px;
   font-weight: 500;
   line-height: 1;
@@ -417,7 +417,7 @@ code, kbd, pre, samp {
 
 // Variant with uppercase transform (dark design doc)
 .text-label-caps {
-  font-family: var(--font-mono);
+  font-family: var(--font-mono), monospace;
   font-size: 12px;
   font-weight: 600;
   line-height: 1;
@@ -466,7 +466,7 @@ code, kbd, pre, samp {
   }
 
   .card-title {
-    font-family: var(--font-display);
+    font-family: var(--font-display), serif;
     color: var(--color-on-surface);
   }
 }
@@ -495,7 +495,7 @@ code, kbd, pre, samp {
 // JetBrains Mono for all form labels
 label,
 .form-label {
-  font-family: var(--font-mono);
+  font-family: var(--font-mono), monospace;
   font-size: 13px;
   font-weight: 500;
   letter-spacing: 0.05em;
@@ -513,7 +513,7 @@ label,
   border-bottom: 1px solid var(--color-outline-variant);
 
   .nav-link {
-    font-family: var(--font-mono);
+    font-family: var(--font-mono), monospace;
     font-size: 13px;
     font-weight: 500;
     letter-spacing: 0.05em;
@@ -530,7 +530,7 @@ label,
 // --- Tech Chips / Badges ---
 
 .badge-tech {
-  font-family: var(--font-mono);
+  font-family: var(--font-mono), monospace;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.05em;
@@ -551,7 +551,7 @@ pre {
   border-radius: var(--radius);
 
   code {
-    font-family: var(--font-mono);
+    font-family: var(--font-mono), monospace;
     font-size: 14px;
     color: var(--color-on-surface);
   }
@@ -560,7 +560,7 @@ pre {
     position: absolute;
     top: var(--spacing-sm);
     right: var(--spacing-md);
-    font-family: var(--font-mono);
+    font-family: var(--font-mono), monospace;
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 0.05em;
@@ -581,7 +581,7 @@ pre {
 }
 
 .material-symbols-outlined {
-    font-family: 'Material Symbols Outlined';
+    font-family: 'Material Symbols Outlined', serif;
     font-weight: normal;
     font-style: normal;
     font-size: 20px;
diff --git a/assets/styles/app/nav.css b/assets/styles/app/nav.css
index 11fdc00..c8beb30 100644
--- a/assets/styles/app/nav.css
+++ b/assets/styles/app/nav.css
@@ -25,7 +25,7 @@ nav div {
 }
 
 #nav-site-name {
-    font-family: var(--font-display);
+    font-family: var(--font-display), serif;
     letter-spacing: -.02em;
     font-size: 1rem;
 }