perf(fonts): self-host Geist Mono variable WOFF2, add @font-face + preload; remove render-blocking CDN CSS

Author: dayatnhbtc

public/fonts/geist/GeistMono[wght].woff2

@@ -11,11 +11,7 @@ const { title = 'Your Name', description = 'Personal site' } = Astro.props;
     <meta name="description" content={description} />
     <meta name="theme-color" content="#ffffff" />
 
-    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono/index.css"
-    />
+    <link rel="preload" as="font" href="/fonts/geist/GeistMono[wght].woff2" type="font/woff2" crossorigin>
 
     <link rel="icon" href="/favicon.svg" />
     <title>{title}</title>

src/layouts/Base.astro

@@ -1,3 +1,11 @@
+@font-face {
+  font-family: "Geist Mono";
+  src: url("/fonts/geist/GeistMono[wght].woff2") format("woff2-variations");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
 :root {
   --bg: #fafafa;
   --text: #111111;
@@ -7,7 +15,7 @@
   --lh: 1.6;
   --space: clamp(1rem, 2vw, 1.75rem);
   --radius: 10px;
-  --font: "Geist Mono Variable", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 @media (prefers-color-scheme: dark) {