Merge pull request #28 from glamsystems/claude

improve font performance

Author: fabiofederici

src/layouts/Layout.astro

@@ -39,6 +39,10 @@ import '../styles/global.css'
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <!-- Font Preloads -->
+    <link rel="preload" href="/fonts/GeistMono-Variable.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/Geist-Variable.woff2" as="font" type="font/woff2" crossorigin />
+
     <!-- Primary Meta -->
     <title>Vaults Report</title>
     <meta name="description" content="Open, community-curated effort to map the protocols, managers, and tooling powering vault infrastructure and onchain asset management." />

src/styles/global.css

@@ -22,6 +22,25 @@
   font-display: swap;
 }
 
+/* Fallback fonts with metric adjustments to minimize layout shift */
+@font-face {
+  font-family: 'Geist Mono Fallback';
+  src: local('ui-monospace'), local('SFMono-Regular'), local('Menlo'), local('Monaco'), local('Consolas');
+  size-adjust: 100%;
+  ascent-override: 95%;
+  descent-override: 22%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: 'Geist Sans Fallback';
+  src: local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue');
+  size-adjust: 100%;
+  ascent-override: 95%;
+  descent-override: 22%;
+  line-gap-override: 0%;
+}
+
 @custom-variant dark (&:is(.dark *));
 
 :root {
@@ -94,9 +113,9 @@
 }
 
 @theme inline {
-    --font-sans: 'Geist Mono', monospace;
-    --font-mono: 'Geist Mono', monospace;
-    --font-geist-sans: 'Geist Sans', sans-serif;
+    --font-sans: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, monospace;
+    --font-mono: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, monospace;
+    --font-geist-sans: 'Geist Sans', 'Geist Sans Fallback', system-ui, sans-serif;
 
     /* Zeus (dark warm gray) */
     --color-zeus-50: #f4f3f1;