adeebshihadeh · Nov 1, 2026 · Nov 1, 2026 · Nov 1, 2026 · Nov 1, 2026 · Nov 1, 2026
diff --git a/src/app.css b/src/app.css
@@ -19,7 +19,7 @@ body {
 
 body {
   color: #000;
-  font-family: Inter, sans-serif;
+  font-family: var(--font-sans);
   font-size: 16px;
   font-weight: 400;
   line-height: 1.4;
@@ -68,6 +68,11 @@ body {
   --color-card-background: #f8f9fa;
   --color-card-background-hover: #e8eaec;
 
+  /* font faces are declared in src/lib/fonts/fonts.css */
+  --font-sans: Inter, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+  --font-display: 'Monument Extended Black', sans-serif;
+
   h1,
   h2,
   h3,
@@ -244,7 +249,7 @@ hr {
 
 button, select {
   color: #000;
-  font-family: Inter, sans-serif;
+  font-family: var(--font-sans);
 }
 
 .mobile-first {

diff --git a/src/lib/components/Badge.svelte b/src/lib/components/Badge.svelte
@@ -15,7 +15,7 @@
 
 <style>
   div {
-    font-family: JetBrains Mono, monospace;
+    font-family: var(--font-mono);
     font-size: 0.875rem;
     text-transform: uppercase;
     width: fit-content;

diff --git a/src/lib/components/HeaderBanner.svelte b/src/lib/components/HeaderBanner.svelte
@@ -32,7 +32,7 @@
 
   .headline {
     color: black;
-    font-family: Inter, sans-serif;
+    font-family: var(--font-sans);
     font-size: 1.25rem;
     margin: 0 0.5rem;
     text-decoration: none;

diff --git a/src/lib/components/NoteCard.svelte b/src/lib/components/NoteCard.svelte
@@ -48,7 +48,7 @@
       display: block !important;
 
       & span {
-        font-family: JetBrains Mono, monospace;
+        font-family: var(--font-mono);
         font-size: 0.875rem;
         font-weight: 400;
         text-transform: uppercase;

diff --git a/src/lib/components/Product.svelte b/src/lib/components/Product.svelte
@@ -343,7 +343,7 @@
         & span {
           font-size: 0.875rem;
           text-transform: uppercase;
-          font-family: JetBrains Mono, monospace;
+          font-family: var(--font-mono);
         }
 
         & strong {

diff --git a/src/lib/components/ProductDescriptions/CommaFour.svelte b/src/lib/components/ProductDescriptions/CommaFour.svelte
@@ -352,7 +352,7 @@
     width: auto;
     padding: 0.25rem 0.5rem;
     color: black;
-    font-family: JetBrains Mono, monospace;
+    font-family: var(--font-mono);
     font-size: 0.875rem;
     font-weight: 600;
     line-height: 1.1;

diff --git a/src/lib/components/ReleaseNote.svelte b/src/lib/components/ReleaseNote.svelte
@@ -33,7 +33,7 @@
     & span {
       text-transform: uppercase;
       margin-bottom: 0.25rem;
-      font-family: JetBrains Mono, monospace;
+      font-family: var(--font-mono);
       font-size: 0.875rem;
     }
 

diff --git a/src/lib/components/TestimonialCards.svelte b/src/lib/components/TestimonialCards.svelte
@@ -154,7 +154,7 @@
     align-items: center;
     color: var(--card-meta);
     display: flex;
-    font-family: JetBrains Mono, monospace;
+    font-family: var(--font-mono);
     font-size: 0.8125rem;
     gap: 0.4rem;
     letter-spacing: normal;
@@ -224,7 +224,7 @@
     bottom: 0.6rem;
     padding: 0.1rem 0.4rem;
     color: #fff;
-    font-family: JetBrains Mono, monospace;
+    font-family: var(--font-mono);
     font-size: 0.6875rem;
     background: rgba(0, 0, 0, 0.75);
   }

diff --git a/src/lib/components/TestimonialSection.svelte b/src/lib/components/TestimonialSection.svelte
@@ -49,7 +49,7 @@
 
   .meta {
     color: var(--color-muted);
-    font-family: JetBrains Mono, monospace;
+    font-family: var(--font-mono);
     font-size: 0.875rem;
     letter-spacing: normal;
     line-height: 1;

diff --git a/src/lib/components/VariantRadioSelector.svelte b/src/lib/components/VariantRadioSelector.svelte
@@ -200,7 +200,7 @@
   .option-status {
     display: block;
     padding-top: 0.5rem;
-    font-family: JetBrains Mono, monospace;
+    font-family: var(--font-mono);
     font-size: 0.75rem;
     font-weight: 400;
     line-height: 1.2;

diff --git a/src/lib/fonts/fonts.css b/src/lib/fonts/fonts.css
@@ -0,0 +1,16 @@
+/*
+ * All @font-face rules, in their own stylesheet (linked from +layout.svelte) so its hashed
+ * filename only changes when the fonts do and browsers keep it cached across deploys.
+ * vite.config.js inlines the latin files every page uses as data URIs, so they arrive with
+ * this render-blocking stylesheet instead of being fetched after the page is drawn.
+ */
+@import '@fontsource/inter/400.css';
+@import '@fontsource/inter/600.css';
+@import '@fontsource/inter/700.css';
+@import '@fontsource/jetbrains-mono/400.css';
+
+@font-face {
+  font-family: 'Monument Extended Black';
+  font-display: block;
+  src: url('./MonumentExtended/MonumentExtended-Black.woff2') format('woff2');
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,11 +1,7 @@
 <script>
   import "../app.css";
 
-  import MonumentExtendedBlack from "$lib/fonts/MonumentExtended/MonumentExtended-Black.woff2";
-  import "@fontsource/inter/400.css";
-  import "@fontsource/inter/600.css";
-  import "@fontsource/inter/700.css";
-  import '@fontsource/jetbrains-mono/400.css';
+  import fontsStylesheet from "$lib/fonts/fonts.css?url";
 
   import { get } from "svelte/store";
 
@@ -73,13 +69,7 @@
 </script>
 
 <svelte:head>
-  <link
-    rel="preload"
-    href={MonumentExtendedBlack}
-    as="font"
-    type="font/woff2"
-    crossorigin="anonymous"
-  />
+  <link rel="stylesheet" href={fontsStylesheet} />
 </svelte:head>
 
 <header class="navbar">
@@ -177,13 +167,6 @@
 </footer>
 
 <style>
-  @font-face {
-    font-display: block;
-    font-family: "Monument Extended Black";
-    font-style: normal;
-    src: url("$lib/fonts/MonumentExtended/MonumentExtended-Black.woff2");
-  }
-
   .navbar {
     top: 0;
     position: sticky;
@@ -211,7 +194,7 @@
     border-right: 1px solid #000;
 
     & > .title {
-      font-family: "Monument Extended Black", sans-serif;
+      font-family: var(--font-display);
       font-size: 20px;
       color: black;
       height: 20px;
@@ -249,7 +232,7 @@
     & a {
       color: #000;
       margin: 0 1.75rem;
-      font-family: Inter, sans-serif;
+      font-family: var(--font-sans);
       font-size: 1.125rem;
       transition: text-shadow 0.2s;
     }
@@ -280,7 +263,7 @@
     & .button {
       color: #000;
       text-transform: uppercase;
-      font-family: Inter, sans-serif;
+      font-family: var(--font-sans);
       border-left: 1px solid #000;
       padding-left: 56px;
       padding-right: 56px;

diff --git a/src/routes/connect/+page.svelte b/src/routes/connect/+page.svelte
@@ -275,7 +275,7 @@
       & hgroup {
         & a {
           text-transform: uppercase;
-          font-family: JetBrains Mono, monospace;
+          font-family: var(--font-mono);
         }
 
         & a {
@@ -303,7 +303,7 @@
     }
 
     & .badge-prefix {
-      font-family: JetBrains Mono, monospace;
+      font-family: var(--font-mono);
       text-transform: uppercase;
       margin-bottom: 0.5rem;
       margin-right: 0.5rem;

diff --git a/src/routes/jobs/+page.svelte b/src/routes/jobs/+page.svelte
@@ -684,7 +684,7 @@
 
   .section-title {
     color: #000;
-    font-family: Inter, sans-serif;
+    font-family: var(--font-sans);
     font-size: clamp(1.6rem, 2.4vw, 2.5rem);
     font-weight: 700;
     line-height: 1.1;
@@ -718,7 +718,7 @@
 
   .eyebrow {
     color: rgba(0, 0, 0, 0.55);
-    font-family: "JetBrains Mono", monospace;
+    font-family: var(--font-mono);
     font-size: 1rem;
     line-height: 1.2;
     margin: 0 0 0.5rem;
@@ -1089,7 +1089,7 @@
   .job-meta-separator,
   .job-location {
     color: #000;
-    font-family: "JetBrains Mono", monospace;
+    font-family: var(--font-mono);
     font-size: 1rem;
     line-height: 1.2;
   }
@@ -1161,7 +1161,7 @@
     background: #000;
     bottom: calc(100% + 0.625rem);
     color: #fff;
-    font-family: "JetBrains Mono", monospace;
+    font-family: var(--font-mono);
     font-size: 0.875rem;
     line-height: 1.2;
     padding: 0.5rem 0.75rem;
@@ -1222,7 +1222,7 @@
 
   .job-qualifications {
     color: #000;
-    font-family: "JetBrains Mono", monospace;
+    font-family: var(--font-mono);
     font-size: 1.0625rem;
     line-height: 1.25;
     margin-bottom: 1.5rem;

diff --git a/src/routes/openpilot/+page.svelte b/src/routes/openpilot/+page.svelte
@@ -233,7 +233,7 @@
     & span:last-of-type {
       color: var(--color-muted);
       text-transform: uppercase;
-      font-family: JetBrains Mono, monospace;
+      font-family: var(--font-mono);
       font-size: 1rem;
       font-weight: 400;
     }
@@ -265,7 +265,7 @@
     & span {
       color: var(--color-muted);
       text-transform: uppercase;
-      font-family: JetBrains Mono, monospace;
+      font-family: var(--font-mono);
       font-size: 1rem;
       font-weight: 400;
       margin-left: 1rem;
@@ -319,7 +319,7 @@
     & hgroup {
       & p {
         opacity: 0.5;
-        font-family: JetBrains Mono, monospace;
+        font-family: var(--font-mono);
         margin: 0 0 0.5rem;
         font-size: 1.5rem;
       }

diff --git a/src/routes/setup/+page.svelte b/src/routes/setup/+page.svelte
@@ -396,7 +396,7 @@
 
         & .header {
           font-size: 0.875rem;
-          font-family: JetBrains Mono, monospace;
+          font-family: var(--font-mono);
           text-transform: uppercase;
           color: #fff;
           background-color: #000;
@@ -474,7 +474,7 @@
 
     & .header {
       font-size: 0.875rem;
-      font-family: JetBrains Mono, monospace;
+      font-family: var(--font-mono);
       text-transform: uppercase;
       color: #fff;
       background-color: #000;

diff --git a/src/routes/shop/body/+page.svelte b/src/routes/shop/body/+page.svelte
@@ -370,7 +370,7 @@
 
       & .label {
         font-size: 1.2rem;
-        font-family: JetBrains Mono, monospace;
+        font-family: var(--font-mono);
         font-weight: 400;
         text-transform: uppercase;
         padding: 1rem 0;

diff --git a/src/routes/shop/chestnut/+page.svelte b/src/routes/shop/chestnut/+page.svelte
@@ -498,7 +498,7 @@
 
   .connection-path h4 {
     margin: 0 0 0.5rem;
-    font-family: "JetBrains Mono", monospace;
+    font-family: var(--font-mono);
     font-size: 0.875rem;
     font-weight: 400;
     text-transform: uppercase;
@@ -519,7 +519,7 @@
   }
 
   .box-variant hgroup span {
-    font-family: "JetBrains Mono", monospace;
+    font-family: var(--font-mono);
     font-size: 1.25rem;
   }
 
@@ -600,7 +600,7 @@
 
   .step-image-pair figcaption {
     margin-top: 0.5rem;
-    font-family: "JetBrains Mono", monospace;
+    font-family: var(--font-mono);
     font-size: 0.875rem;
     text-align: center;
     text-transform: uppercase;

diff --git a/src/routes/shop/comma-four/+page.svelte b/src/routes/shop/comma-four/+page.svelte
@@ -427,7 +427,7 @@
         }
 
         & span {
-          font-family: JetBrains Mono, monospace;
+          font-family: var(--font-mono);
           font-size: 0.875rem;
           font-weight: 400;
           text-transform: uppercase;
@@ -463,7 +463,7 @@
 
   hgroup {
     & span {
-      font-family: JetBrains Mono, monospace;
+      font-family: var(--font-mono);
       font-size: 1rem;
       margin-bottom: 0.5rem;
     }

diff --git a/src/routes/vehicles/+page.svelte b/src/routes/vehicles/+page.svelte
@@ -230,7 +230,7 @@
 
     & .title {
       text-transform: uppercase;
-      font-family: Monument Extended Black, sans-serif;
+      font-family: var(--font-display);
       font-size: 2rem;
       font-weight: 600;
       line-height: 1.2;

diff --git a/vite.config.js b/vite.config.js
@@ -11,6 +11,8 @@ export default defineConfig({
     // URIs adds ~180KB to the home page HTML and stalls PostHog's DOM snapshot.
     assetsInlineLimit: (filePath) => {
       if (filePath.includes('/icons/home/brands/')) return false;
+      // fonts every page uses; inlined into src/lib/fonts/fonts.css so they're ready for first layout
+      if (/(MonumentExtended-Black|-latin-\d+-normal)\.woff2$/.test(filePath)) return true;
     },
   },
   plugins: [