perf: wave D — self-host Inter latin subset, preload, font-display: optional (#47)

Bissbert · web-flow · commit ce3f69bd0158 · 2026-05-18T13:01:40.000+02:00
Replaces the @fontsource-variable/inter @import with a self-declared @font-face block targeting a single 48 KiB latin subset shipped from /public/fonts/inter-latin-variable.woff2, plus a <link rel="preload"> in BaseLayout.astro so the font byte stream races CSS parsing. - Removes 6 unused @font-face blocks (cyrillic, cyrillic-ext, greek, greek-ext, vietnamese, latin-ext) that fontsource ships by default — the site is English-only. - font-display: optional eliminates FOUT/FOIT entirely; with the preload tag the latin subset typically arrives before first paint. - Cache rule already in place from wave A (/fonts/* immutable, max-age=31536000), so repeat visits skip the network round-trip. JetBrains Mono kept on @fontsource for now — only used in below-fold code blocks, not critical path. Part of audits/perf-2026-05/ remediation. Lighthouse re-run pending.
diff --git a/public/fonts/inter-latin-variable.woff2 b/public/fonts/inter-latin-variable.woff2
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -56,7 +56,15 @@ const fullTitle = isHome
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 
-    <!-- Fonts (self-hosted via @fontsource-variable to avoid CLS / third-party hop) -->
+    <!-- Fonts: self-hosted Inter latin subset, preloaded for above-the-fold body text.
+         The @font-face block lives in src/styles/global.css (font-display: optional). -->
+    <link
+      rel="preload"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+      href="/fonts/inter-latin-variable.woff2"
+    />
 
     <title>{fullTitle}</title>
 
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,6 +1,21 @@
-@import '@fontsource-variable/inter/wght.css';
 @import '@fontsource-variable/jetbrains-mono/wght.css';
 
+/*
+ * Inter Variable — latin subset only, self-hosted from /public/fonts/.
+ * Preloaded in BaseLayout.astro <head>. font-display: optional avoids any
+ * FOUT/CLS contribution: if the font is not ready within ~100 ms the system
+ * font is used and Inter only swaps in on subsequent navigations (it's
+ * cached by then). With the preload tag the latin subset typically beats
+ * that window on first paint anyway.
+ */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: optional;
+  font-weight: 100 900;
+  src: url('/fonts/inter-latin-variable.woff2') format('woff2-variations');
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
