From 1220e5ad6c73e73e578e989dc244062be26088fb Mon Sep 17 00:00:00 2001
From: Adeeb Shihadeh <adeebshihadeh@gmail.com>
Date: Sun, 1 Nov 2026 09:04:49 -1000
Subject: [PATCH 1/4] fonts: embed core fonts and add metric-matched fallbacks
 to stop layout shift

Fonts were loaded from fontsource's CSS with font-display: swap, so text was
laid out in a system fallback first and reflowed when each font arrived.

- Declare all @font-face rules in src/lib/fonts/fonts.css, loaded as its own
  stylesheet so its hash only changes when the fonts do.
- Inline the five latin files every page uses (Inter 400/600/700, JetBrains
  Mono 400, Monument Extended Black) as data URIs via assetsInlineLimit, so
  they arrive with render-blocking CSS. Other subsets stay as regular files.
- Add metric-matched local fallbacks (Arial, Arial Bold, Courier New, Arial
  Black) with size-adjust/ascent/descent overrides computed from the font
  files, so the brief pre-decode fallback takes the same space.
- Use --font-sans/--font-mono/--font-display variables for every
  font-family declaration.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app.css                                   |   9 +-
 src/lib/components/Badge.svelte               |   2 +-
 src/lib/components/HeaderBanner.svelte        |   2 +-
 src/lib/components/NoteCard.svelte            |   2 +-
 src/lib/components/Product.svelte             |   2 +-
 .../ProductDescriptions/CommaFour.svelte      |   2 +-
 src/lib/components/ReleaseNote.svelte         |   2 +-
 src/lib/components/TestimonialCards.svelte    |   4 +-
 src/lib/components/TestimonialSection.svelte  |   2 +-
 .../components/VariantRadioSelector.svelte    |   2 +-
 src/lib/fonts/fonts.css                       | 346 ++++++++++++++++++
 src/routes/+layout.svelte                     |  27 +-
 src/routes/connect/+page.svelte               |   4 +-
 src/routes/jobs/+page.svelte                  |  10 +-
 src/routes/openpilot/+page.svelte             |   6 +-
 src/routes/setup/+page.svelte                 |   4 +-
 src/routes/shop/body/+page.svelte             |   2 +-
 src/routes/shop/chestnut/+page.svelte         |   6 +-
 src/routes/shop/comma-four/+page.svelte       |   4 +-
 src/routes/vehicles/+page.svelte              |   2 +-
 vite.config.js                                |   2 +
 21 files changed, 389 insertions(+), 53 deletions(-)
 create mode 100644 src/lib/fonts/fonts.css

diff --git a/src/app.css b/src/app.css
index 2597137e..3f9f0495 100644
--- 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;
 
+  /* each web font is followed by a metric-matched fallback from src/lib/fonts/fonts.css */
+  --font-sans: Inter, 'Inter Fallback', sans-serif;
+  --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
+  --font-display: 'Monument Extended Black', 'Monument Extended Black Fallback', 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
index d31a68a9..f15079c0 100644
--- 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
index bbf81e8e..27aecfba 100644
--- 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
index e7590091..3f5e8999 100644
--- 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
index dffdadae..7f80af44 100644
--- 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
index 549892c1..ad57782c 100644
--- 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
index cd195930..49a2db22 100644
--- 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
index b7dc457a..4f867c07 100644
--- 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
index f811fbfc..b6695d24 100644
--- 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
index 04869d9c..dbf10370 100644
--- 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
new file mode 100644
index 00000000..8a68339e
--- /dev/null
+++ b/src/lib/fonts/fonts.css
@@ -0,0 +1,346 @@
+/*
+ * All @font-face rules for the site, 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.
+ *
+ * The basic latin files are used on every page, so vite.config.js inlines them here as data URIs.
+ * The stylesheet is render-blocking, so they're ready for the first layout: no fallback font,
+ * no swap, and no layout shift. The other subsets are rarely needed (the browser only fetches one
+ * when a page contains a character in its unicode-range), so they stay as regular files.
+ *
+ * Inter and JetBrains Mono rules are copied from @fontsource/inter and @fontsource/jetbrains-mono.
+ */
+
+@font-face {
+  font-family: 'Monument Extended Black';
+  font-style: normal;
+  font-display: block;
+  src: url('./MonumentExtended/MonumentExtended-Black.woff2') format('woff2');
+}
+
+/* inter-cyrillic-ext-400-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/inter/files/inter-cyrillic-ext-400-normal.woff2') format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* inter-cyrillic-400-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/inter/files/inter-cyrillic-400-normal.woff2') format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* inter-greek-ext-400-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/inter/files/inter-greek-ext-400-normal.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* inter-greek-400-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/inter/files/inter-greek-400-normal.woff2') format('woff2');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* inter-vietnamese-400-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/inter/files/inter-vietnamese-400-normal.woff2') format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* inter-latin-ext-400-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/inter/files/inter-latin-ext-400-normal.woff2') format('woff2');
+  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* inter-latin-400-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: block;
+  font-weight: 400;
+  src: url('@fontsource/inter/files/inter-latin-400-normal.woff2') format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* inter-cyrillic-ext-600-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('@fontsource/inter/files/inter-cyrillic-ext-600-normal.woff2') format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* inter-cyrillic-600-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('@fontsource/inter/files/inter-cyrillic-600-normal.woff2') format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* inter-greek-ext-600-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('@fontsource/inter/files/inter-greek-ext-600-normal.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* inter-greek-600-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('@fontsource/inter/files/inter-greek-600-normal.woff2') format('woff2');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* inter-vietnamese-600-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('@fontsource/inter/files/inter-vietnamese-600-normal.woff2') format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* inter-latin-ext-600-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('@fontsource/inter/files/inter-latin-ext-600-normal.woff2') format('woff2');
+  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* inter-latin-600-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: block;
+  font-weight: 600;
+  src: url('@fontsource/inter/files/inter-latin-600-normal.woff2') format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* inter-cyrillic-ext-700-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('@fontsource/inter/files/inter-cyrillic-ext-700-normal.woff2') format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* inter-cyrillic-700-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('@fontsource/inter/files/inter-cyrillic-700-normal.woff2') format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* inter-greek-ext-700-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('@fontsource/inter/files/inter-greek-ext-700-normal.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* inter-greek-700-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('@fontsource/inter/files/inter-greek-700-normal.woff2') format('woff2');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* inter-vietnamese-700-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('@fontsource/inter/files/inter-vietnamese-700-normal.woff2') format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* inter-latin-ext-700-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('@fontsource/inter/files/inter-latin-ext-700-normal.woff2') format('woff2');
+  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* inter-latin-700-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: block;
+  font-weight: 700;
+  src: url('@fontsource/inter/files/inter-latin-700-normal.woff2') format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* jetbrains-mono-cyrillic-ext-400-normal */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/jetbrains-mono/files/jetbrains-mono-cyrillic-ext-400-normal.woff2') format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* jetbrains-mono-cyrillic-400-normal */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/jetbrains-mono/files/jetbrains-mono-cyrillic-400-normal.woff2') format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* jetbrains-mono-greek-400-normal */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/jetbrains-mono/files/jetbrains-mono-greek-400-normal.woff2') format('woff2');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* jetbrains-mono-vietnamese-400-normal */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/jetbrains-mono/files/jetbrains-mono-vietnamese-400-normal.woff2') format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* jetbrains-mono-latin-ext-400-normal */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/jetbrains-mono/files/jetbrains-mono-latin-ext-400-normal.woff2') format('woff2');
+  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* jetbrains-mono-latin-400-normal */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-display: block;
+  font-weight: 400;
+  src: url('@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2') format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/*
+ * Metric-matched fallbacks, used until the fonts above are decoded (or for any glyph they lack).
+ * Each local font is scaled to take up the same space as the web font it stands in for, so
+ * switching to the web font doesn't reflow the page, however late it lands.
+ * Values are computed from the font files (size-adjust: average advance width over sample site
+ * copy; ascent/descent/line-gap: the web font's vertical metrics divided by size-adjust). Weights
+ * mirror the web fonts so the browser picks the matching face. Recompute if the fonts change.
+ */
+
+@font-face {
+  font-family: 'Inter Fallback';
+  font-weight: 400;
+  src: local('Arial'), local('ArialMT');
+  size-adjust: 107.08%;
+  ascent-override: 90.47%;
+  descent-override: 22.53%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: 'Inter Fallback';
+  font-weight: 600;
+  src: local('Arial Bold'), local('Arial-BoldMT');
+  size-adjust: 101.67%;
+  ascent-override: 95.28%;
+  descent-override: 23.73%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: 'Inter Fallback';
+  font-weight: 700;
+  src: local('Arial Bold'), local('Arial-BoldMT');
+  size-adjust: 102.65%;
+  ascent-override: 94.38%;
+  descent-override: 23.50%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono Fallback';
+  font-weight: 400;
+  src: local('Courier New'), local('CourierNewPSMT');
+  size-adjust: 99.98%;
+  ascent-override: 102.02%;
+  descent-override: 30.00%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: 'Monument Extended Black Fallback';
+  src: local('Arial Black'), local('Arial-Black');
+  size-adjust: 134.39%;
+  ascent-override: 63.99%;
+  descent-override: 22.32%;
+  line-gap-override: 7.44%;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c9802e01..51608596 100644
--- 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
index 0bf5abcc..32266e90 100644
--- 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
index 90ce99c4..1b70cf98 100644
--- 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
index 895ad7f8..ba68e9f2 100644
--- 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
index ad1c0839..9deb1425 100644
--- 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
index a2bce3f9..75eed6fc 100644
--- 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
index ef5f5e79..cef7fba6 100644
--- 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
index 1f0e14fe..aaae75c4 100644
--- 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
index 87f78e32..7e51c12d 100644
--- 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
index 39e6a2f9..bb7a885c 100644
--- 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: [

From 5ca70c938c6c002bdc44409eea7641feaed42012 Mon Sep 17 00:00:00 2001
From: Adeeb Shihadeh <adeebshihadeh@gmail.com>
Date: Sun, 1 Nov 2026 09:11:18 -1000
Subject: [PATCH 2/4] fonts: drop metric-matched fallbacks

Keep the separate fonts stylesheet with the inlined core fonts; remove the
fallback @font-face rules and the font-family variables.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app.css                                   |  9 +--
 src/lib/components/Badge.svelte               |  2 +-
 src/lib/components/HeaderBanner.svelte        |  2 +-
 src/lib/components/NoteCard.svelte            |  2 +-
 src/lib/components/Product.svelte             |  2 +-
 .../ProductDescriptions/CommaFour.svelte      |  2 +-
 src/lib/components/ReleaseNote.svelte         |  2 +-
 src/lib/components/TestimonialCards.svelte    |  4 +-
 src/lib/components/TestimonialSection.svelte  |  2 +-
 .../components/VariantRadioSelector.svelte    |  2 +-
 src/lib/fonts/fonts.css                       | 65 ++-----------------
 src/routes/+layout.svelte                     |  6 +-
 src/routes/connect/+page.svelte               |  4 +-
 src/routes/jobs/+page.svelte                  | 10 +--
 src/routes/openpilot/+page.svelte             |  6 +-
 src/routes/setup/+page.svelte                 |  4 +-
 src/routes/shop/body/+page.svelte             |  2 +-
 src/routes/shop/chestnut/+page.svelte         |  6 +-
 src/routes/shop/comma-four/+page.svelte       |  4 +-
 src/routes/vehicles/+page.svelte              |  2 +-
 20 files changed, 38 insertions(+), 100 deletions(-)

diff --git a/src/app.css b/src/app.css
index 3f9f0495..2597137e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -19,7 +19,7 @@ body {
 
 body {
   color: #000;
-  font-family: var(--font-sans);
+  font-family: Inter, sans-serif;
   font-size: 16px;
   font-weight: 400;
   line-height: 1.4;
@@ -68,11 +68,6 @@ body {
   --color-card-background: #f8f9fa;
   --color-card-background-hover: #e8eaec;
 
-  /* each web font is followed by a metric-matched fallback from src/lib/fonts/fonts.css */
-  --font-sans: Inter, 'Inter Fallback', sans-serif;
-  --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
-  --font-display: 'Monument Extended Black', 'Monument Extended Black Fallback', sans-serif;
-
   h1,
   h2,
   h3,
@@ -249,7 +244,7 @@ hr {
 
 button, select {
   color: #000;
-  font-family: var(--font-sans);
+  font-family: Inter, sans-serif;
 }
 
 .mobile-first {
diff --git a/src/lib/components/Badge.svelte b/src/lib/components/Badge.svelte
index f15079c0..d31a68a9 100644
--- a/src/lib/components/Badge.svelte
+++ b/src/lib/components/Badge.svelte
@@ -15,7 +15,7 @@
 
 <style>
   div {
-    font-family: var(--font-mono);
+    font-family: JetBrains Mono, monospace;
     font-size: 0.875rem;
     text-transform: uppercase;
     width: fit-content;
diff --git a/src/lib/components/HeaderBanner.svelte b/src/lib/components/HeaderBanner.svelte
index 27aecfba..bbf81e8e 100644
--- a/src/lib/components/HeaderBanner.svelte
+++ b/src/lib/components/HeaderBanner.svelte
@@ -32,7 +32,7 @@
 
   .headline {
     color: black;
-    font-family: var(--font-sans);
+    font-family: Inter, sans-serif;
     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
index 3f5e8999..e7590091 100644
--- a/src/lib/components/NoteCard.svelte
+++ b/src/lib/components/NoteCard.svelte
@@ -48,7 +48,7 @@
       display: block !important;
 
       & span {
-        font-family: var(--font-mono);
+        font-family: JetBrains Mono, monospace;
         font-size: 0.875rem;
         font-weight: 400;
         text-transform: uppercase;
diff --git a/src/lib/components/Product.svelte b/src/lib/components/Product.svelte
index 7f80af44..dffdadae 100644
--- 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: var(--font-mono);
+          font-family: JetBrains Mono, monospace;
         }
 
         & strong {
diff --git a/src/lib/components/ProductDescriptions/CommaFour.svelte b/src/lib/components/ProductDescriptions/CommaFour.svelte
index ad57782c..549892c1 100644
--- 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: var(--font-mono);
+    font-family: JetBrains Mono, monospace;
     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
index 49a2db22..cd195930 100644
--- 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: var(--font-mono);
+      font-family: JetBrains Mono, monospace;
       font-size: 0.875rem;
     }
 
diff --git a/src/lib/components/TestimonialCards.svelte b/src/lib/components/TestimonialCards.svelte
index 4f867c07..b7dc457a 100644
--- 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: var(--font-mono);
+    font-family: JetBrains Mono, monospace;
     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: var(--font-mono);
+    font-family: JetBrains Mono, monospace;
     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
index b6695d24..f811fbfc 100644
--- a/src/lib/components/TestimonialSection.svelte
+++ b/src/lib/components/TestimonialSection.svelte
@@ -49,7 +49,7 @@
 
   .meta {
     color: var(--color-muted);
-    font-family: var(--font-mono);
+    font-family: JetBrains Mono, monospace;
     font-size: 0.875rem;
     letter-spacing: normal;
     line-height: 1;
diff --git a/src/lib/components/VariantRadioSelector.svelte b/src/lib/components/VariantRadioSelector.svelte
index dbf10370..04869d9c 100644
--- 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: var(--font-mono);
+    font-family: JetBrains Mono, monospace;
     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
index 8a68339e..4a0215e9 100644
--- a/src/lib/fonts/fonts.css
+++ b/src/lib/fonts/fonts.css
@@ -3,9 +3,10 @@
  * hashed filename only changes when the fonts do and browsers keep it cached across deploys.
  *
  * The basic latin files are used on every page, so vite.config.js inlines them here as data URIs.
- * The stylesheet is render-blocking, so they're ready for the first layout: no fallback font,
- * no swap, and no layout shift. The other subsets are rarely needed (the browser only fetches one
- * when a page contains a character in its unicode-range), so they stay as regular files.
+ * The stylesheet is render-blocking, so they arrive before the page is drawn instead of being
+ * fetched after it, and are usually decoded before the first paint. The other subsets are rarely
+ * needed (the browser only fetches one when a page contains a character in its unicode-range),
+ * so they stay as regular files.
  *
  * Inter and JetBrains Mono rules are copied from @fontsource/inter and @fontsource/jetbrains-mono.
  */
@@ -286,61 +287,3 @@
   src: url('@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2') format('woff2');
   unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
 }
-
-/*
- * Metric-matched fallbacks, used until the fonts above are decoded (or for any glyph they lack).
- * Each local font is scaled to take up the same space as the web font it stands in for, so
- * switching to the web font doesn't reflow the page, however late it lands.
- * Values are computed from the font files (size-adjust: average advance width over sample site
- * copy; ascent/descent/line-gap: the web font's vertical metrics divided by size-adjust). Weights
- * mirror the web fonts so the browser picks the matching face. Recompute if the fonts change.
- */
-
-@font-face {
-  font-family: 'Inter Fallback';
-  font-weight: 400;
-  src: local('Arial'), local('ArialMT');
-  size-adjust: 107.08%;
-  ascent-override: 90.47%;
-  descent-override: 22.53%;
-  line-gap-override: 0%;
-}
-
-@font-face {
-  font-family: 'Inter Fallback';
-  font-weight: 600;
-  src: local('Arial Bold'), local('Arial-BoldMT');
-  size-adjust: 101.67%;
-  ascent-override: 95.28%;
-  descent-override: 23.73%;
-  line-gap-override: 0%;
-}
-
-@font-face {
-  font-family: 'Inter Fallback';
-  font-weight: 700;
-  src: local('Arial Bold'), local('Arial-BoldMT');
-  size-adjust: 102.65%;
-  ascent-override: 94.38%;
-  descent-override: 23.50%;
-  line-gap-override: 0%;
-}
-
-@font-face {
-  font-family: 'JetBrains Mono Fallback';
-  font-weight: 400;
-  src: local('Courier New'), local('CourierNewPSMT');
-  size-adjust: 99.98%;
-  ascent-override: 102.02%;
-  descent-override: 30.00%;
-  line-gap-override: 0%;
-}
-
-@font-face {
-  font-family: 'Monument Extended Black Fallback';
-  src: local('Arial Black'), local('Arial-Black');
-  size-adjust: 134.39%;
-  ascent-override: 63.99%;
-  descent-override: 22.32%;
-  line-gap-override: 7.44%;
-}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 51608596..9f375b22 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -194,7 +194,7 @@
     border-right: 1px solid #000;
 
     & > .title {
-      font-family: var(--font-display);
+      font-family: "Monument Extended Black", sans-serif;
       font-size: 20px;
       color: black;
       height: 20px;
@@ -232,7 +232,7 @@
     & a {
       color: #000;
       margin: 0 1.75rem;
-      font-family: var(--font-sans);
+      font-family: Inter, sans-serif;
       font-size: 1.125rem;
       transition: text-shadow 0.2s;
     }
@@ -263,7 +263,7 @@
     & .button {
       color: #000;
       text-transform: uppercase;
-      font-family: var(--font-sans);
+      font-family: Inter, sans-serif;
       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
index 32266e90..0bf5abcc 100644
--- a/src/routes/connect/+page.svelte
+++ b/src/routes/connect/+page.svelte
@@ -275,7 +275,7 @@
       & hgroup {
         & a {
           text-transform: uppercase;
-          font-family: var(--font-mono);
+          font-family: JetBrains Mono, monospace;
         }
 
         & a {
@@ -303,7 +303,7 @@
     }
 
     & .badge-prefix {
-      font-family: var(--font-mono);
+      font-family: JetBrains Mono, monospace;
       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
index 1b70cf98..90ce99c4 100644
--- a/src/routes/jobs/+page.svelte
+++ b/src/routes/jobs/+page.svelte
@@ -684,7 +684,7 @@
 
   .section-title {
     color: #000;
-    font-family: var(--font-sans);
+    font-family: Inter, sans-serif;
     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: var(--font-mono);
+    font-family: "JetBrains Mono", monospace;
     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: var(--font-mono);
+    font-family: "JetBrains Mono", monospace;
     font-size: 1rem;
     line-height: 1.2;
   }
@@ -1161,7 +1161,7 @@
     background: #000;
     bottom: calc(100% + 0.625rem);
     color: #fff;
-    font-family: var(--font-mono);
+    font-family: "JetBrains Mono", monospace;
     font-size: 0.875rem;
     line-height: 1.2;
     padding: 0.5rem 0.75rem;
@@ -1222,7 +1222,7 @@
 
   .job-qualifications {
     color: #000;
-    font-family: var(--font-mono);
+    font-family: "JetBrains Mono", monospace;
     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
index ba68e9f2..895ad7f8 100644
--- 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: var(--font-mono);
+      font-family: JetBrains Mono, monospace;
       font-size: 1rem;
       font-weight: 400;
     }
@@ -265,7 +265,7 @@
     & span {
       color: var(--color-muted);
       text-transform: uppercase;
-      font-family: var(--font-mono);
+      font-family: JetBrains Mono, monospace;
       font-size: 1rem;
       font-weight: 400;
       margin-left: 1rem;
@@ -319,7 +319,7 @@
     & hgroup {
       & p {
         opacity: 0.5;
-        font-family: var(--font-mono);
+        font-family: JetBrains Mono, monospace;
         margin: 0 0 0.5rem;
         font-size: 1.5rem;
       }
diff --git a/src/routes/setup/+page.svelte b/src/routes/setup/+page.svelte
index 9deb1425..ad1c0839 100644
--- a/src/routes/setup/+page.svelte
+++ b/src/routes/setup/+page.svelte
@@ -396,7 +396,7 @@
 
         & .header {
           font-size: 0.875rem;
-          font-family: var(--font-mono);
+          font-family: JetBrains Mono, monospace;
           text-transform: uppercase;
           color: #fff;
           background-color: #000;
@@ -474,7 +474,7 @@
 
     & .header {
       font-size: 0.875rem;
-      font-family: var(--font-mono);
+      font-family: JetBrains Mono, monospace;
       text-transform: uppercase;
       color: #fff;
       background-color: #000;
diff --git a/src/routes/shop/body/+page.svelte b/src/routes/shop/body/+page.svelte
index 75eed6fc..a2bce3f9 100644
--- 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: var(--font-mono);
+        font-family: JetBrains Mono, monospace;
         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
index cef7fba6..ef5f5e79 100644
--- 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: var(--font-mono);
+    font-family: "JetBrains Mono", monospace;
     font-size: 0.875rem;
     font-weight: 400;
     text-transform: uppercase;
@@ -519,7 +519,7 @@
   }
 
   .box-variant hgroup span {
-    font-family: var(--font-mono);
+    font-family: "JetBrains Mono", monospace;
     font-size: 1.25rem;
   }
 
@@ -600,7 +600,7 @@
 
   .step-image-pair figcaption {
     margin-top: 0.5rem;
-    font-family: var(--font-mono);
+    font-family: "JetBrains Mono", monospace;
     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
index aaae75c4..1f0e14fe 100644
--- a/src/routes/shop/comma-four/+page.svelte
+++ b/src/routes/shop/comma-four/+page.svelte
@@ -427,7 +427,7 @@
         }
 
         & span {
-          font-family: var(--font-mono);
+          font-family: JetBrains Mono, monospace;
           font-size: 0.875rem;
           font-weight: 400;
           text-transform: uppercase;
@@ -463,7 +463,7 @@
 
   hgroup {
     & span {
-      font-family: var(--font-mono);
+      font-family: JetBrains Mono, monospace;
       font-size: 1rem;
       margin-bottom: 0.5rem;
     }
diff --git a/src/routes/vehicles/+page.svelte b/src/routes/vehicles/+page.svelte
index 7e51c12d..87f78e32 100644
--- a/src/routes/vehicles/+page.svelte
+++ b/src/routes/vehicles/+page.svelte
@@ -230,7 +230,7 @@
 
     & .title {
       text-transform: uppercase;
-      font-family: var(--font-display);
+      font-family: Monument Extended Black, sans-serif;
       font-size: 2rem;
       font-weight: 600;
       line-height: 1.2;

From bdf76fca0459fccfe84b233a670f226ba526d899 Mon Sep 17 00:00:00 2001
From: Adeeb Shihadeh <adeebshihadeh@gmail.com>
Date: Sun, 1 Nov 2026 09:12:38 -1000
Subject: [PATCH 3/4] fonts: use --font-sans/--font-mono/--font-display for
 font-family

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app.css                                            |  9 +++++++--
 src/lib/components/Badge.svelte                        |  2 +-
 src/lib/components/HeaderBanner.svelte                 |  2 +-
 src/lib/components/NoteCard.svelte                     |  2 +-
 src/lib/components/Product.svelte                      |  2 +-
 .../components/ProductDescriptions/CommaFour.svelte    |  2 +-
 src/lib/components/ReleaseNote.svelte                  |  2 +-
 src/lib/components/TestimonialCards.svelte             |  4 ++--
 src/lib/components/TestimonialSection.svelte           |  2 +-
 src/lib/components/VariantRadioSelector.svelte         |  2 +-
 src/routes/+layout.svelte                              |  6 +++---
 src/routes/connect/+page.svelte                        |  4 ++--
 src/routes/jobs/+page.svelte                           | 10 +++++-----
 src/routes/openpilot/+page.svelte                      |  6 +++---
 src/routes/setup/+page.svelte                          |  4 ++--
 src/routes/shop/body/+page.svelte                      |  2 +-
 src/routes/shop/chestnut/+page.svelte                  |  6 +++---
 src/routes/shop/comma-four/+page.svelte                |  4 ++--
 src/routes/vehicles/+page.svelte                       |  2 +-
 19 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/src/app.css b/src/app.css
index 2597137e..2467138e 100644
--- 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
index d31a68a9..f15079c0 100644
--- 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
index bbf81e8e..27aecfba 100644
--- 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
index e7590091..3f5e8999 100644
--- 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
index dffdadae..7f80af44 100644
--- 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
index 549892c1..ad57782c 100644
--- 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
index cd195930..49a2db22 100644
--- 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
index b7dc457a..4f867c07 100644
--- 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
index f811fbfc..b6695d24 100644
--- 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
index 04869d9c..dbf10370 100644
--- 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/routes/+layout.svelte b/src/routes/+layout.svelte
index 9f375b22..51608596 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -194,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;
@@ -232,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;
     }
@@ -263,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
index 0bf5abcc..32266e90 100644
--- 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
index 90ce99c4..1b70cf98 100644
--- 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
index 895ad7f8..ba68e9f2 100644
--- 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
index ad1c0839..9deb1425 100644
--- 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
index a2bce3f9..75eed6fc 100644
--- 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
index ef5f5e79..cef7fba6 100644
--- 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
index 1f0e14fe..aaae75c4 100644
--- 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
index 87f78e32..7e51c12d 100644
--- 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;

From 82ab8a4ebd40bfd7fb27c1a3e1d7cbc4dbbaeb3d Mon Sep 17 00:00:00 2001
From: Adeeb Shihadeh <adeebshihadeh@gmail.com>
Date: Sun, 1 Nov 2026 09:16:26 -1000
Subject: [PATCH 4/4] fonts: import fontsource CSS instead of copying its rules

The rules were copied to change font-display, which no longer matters now that
the fonts are inlined; assetsInlineLimit inlines them from fontsource's CSS too.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/lib/fonts/fonts.css | 289 ++--------------------------------------
 1 file changed, 8 insertions(+), 281 deletions(-)

diff --git a/src/lib/fonts/fonts.css b/src/lib/fonts/fonts.css
index 4a0215e9..069123e3 100644
--- a/src/lib/fonts/fonts.css
+++ b/src/lib/fonts/fonts.css
@@ -1,289 +1,16 @@
 /*
- * All @font-face rules for the site, 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.
- *
- * The basic latin files are used on every page, so vite.config.js inlines them here as data URIs.
- * The stylesheet is render-blocking, so they arrive before the page is drawn instead of being
- * fetched after it, and are usually decoded before the first paint. The other subsets are rarely
- * needed (the browser only fetches one when a page contains a character in its unicode-range),
- * so they stay as regular files.
- *
- * Inter and JetBrains Mono rules are copied from @fontsource/inter and @fontsource/jetbrains-mono.
+ * 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-style: normal;
   font-display: block;
   src: url('./MonumentExtended/MonumentExtended-Black.woff2') format('woff2');
 }
-
-/* inter-cyrillic-ext-400-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('@fontsource/inter/files/inter-cyrillic-ext-400-normal.woff2') format('woff2');
-  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
-}
-
-/* inter-cyrillic-400-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('@fontsource/inter/files/inter-cyrillic-400-normal.woff2') format('woff2');
-  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
-}
-
-/* inter-greek-ext-400-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('@fontsource/inter/files/inter-greek-ext-400-normal.woff2') format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* inter-greek-400-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('@fontsource/inter/files/inter-greek-400-normal.woff2') format('woff2');
-  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
-}
-
-/* inter-vietnamese-400-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('@fontsource/inter/files/inter-vietnamese-400-normal.woff2') format('woff2');
-  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
-}
-
-/* inter-latin-ext-400-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('@fontsource/inter/files/inter-latin-ext-400-normal.woff2') format('woff2');
-  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
-}
-
-/* inter-latin-400-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: block;
-  font-weight: 400;
-  src: url('@fontsource/inter/files/inter-latin-400-normal.woff2') format('woff2');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-}
-
-/* inter-cyrillic-ext-600-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url('@fontsource/inter/files/inter-cyrillic-ext-600-normal.woff2') format('woff2');
-  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
-}
-
-/* inter-cyrillic-600-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url('@fontsource/inter/files/inter-cyrillic-600-normal.woff2') format('woff2');
-  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
-}
-
-/* inter-greek-ext-600-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url('@fontsource/inter/files/inter-greek-ext-600-normal.woff2') format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* inter-greek-600-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url('@fontsource/inter/files/inter-greek-600-normal.woff2') format('woff2');
-  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
-}
-
-/* inter-vietnamese-600-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url('@fontsource/inter/files/inter-vietnamese-600-normal.woff2') format('woff2');
-  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
-}
-
-/* inter-latin-ext-600-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url('@fontsource/inter/files/inter-latin-ext-600-normal.woff2') format('woff2');
-  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
-}
-
-/* inter-latin-600-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: block;
-  font-weight: 600;
-  src: url('@fontsource/inter/files/inter-latin-600-normal.woff2') format('woff2');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-}
-
-/* inter-cyrillic-ext-700-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 700;
-  src: url('@fontsource/inter/files/inter-cyrillic-ext-700-normal.woff2') format('woff2');
-  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
-}
-
-/* inter-cyrillic-700-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 700;
-  src: url('@fontsource/inter/files/inter-cyrillic-700-normal.woff2') format('woff2');
-  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
-}
-
-/* inter-greek-ext-700-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 700;
-  src: url('@fontsource/inter/files/inter-greek-ext-700-normal.woff2') format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* inter-greek-700-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 700;
-  src: url('@fontsource/inter/files/inter-greek-700-normal.woff2') format('woff2');
-  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
-}
-
-/* inter-vietnamese-700-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 700;
-  src: url('@fontsource/inter/files/inter-vietnamese-700-normal.woff2') format('woff2');
-  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
-}
-
-/* inter-latin-ext-700-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 700;
-  src: url('@fontsource/inter/files/inter-latin-ext-700-normal.woff2') format('woff2');
-  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
-}
-
-/* inter-latin-700-normal */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-display: block;
-  font-weight: 700;
-  src: url('@fontsource/inter/files/inter-latin-700-normal.woff2') format('woff2');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-}
-
-/* jetbrains-mono-cyrillic-ext-400-normal */
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('@fontsource/jetbrains-mono/files/jetbrains-mono-cyrillic-ext-400-normal.woff2') format('woff2');
-  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
-}
-
-/* jetbrains-mono-cyrillic-400-normal */
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('@fontsource/jetbrains-mono/files/jetbrains-mono-cyrillic-400-normal.woff2') format('woff2');
-  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
-}
-
-/* jetbrains-mono-greek-400-normal */
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('@fontsource/jetbrains-mono/files/jetbrains-mono-greek-400-normal.woff2') format('woff2');
-  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
-}
-
-/* jetbrains-mono-vietnamese-400-normal */
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('@fontsource/jetbrains-mono/files/jetbrains-mono-vietnamese-400-normal.woff2') format('woff2');
-  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
-}
-
-/* jetbrains-mono-latin-ext-400-normal */
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('@fontsource/jetbrains-mono/files/jetbrains-mono-latin-ext-400-normal.woff2') format('woff2');
-  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
-}
-
-/* jetbrains-mono-latin-400-normal */
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-display: block;
-  font-weight: 400;
-  src: url('@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2') format('woff2');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-}