Preload fonts in Head to prevent layout shifts

fabian-hiller · Jan 2, 2025 · 18bf39f · 18bf39f
1 parent da73215
commit 18bf39f
Showing 1 changed file with 23 additions and 0 deletions.
diff --git a/website/src/components/Head.tsx b/website/src/components/Head.tsx
@@ -74,6 +74,29 @@ export const Head = component$(() => {
       <link rel="icon" type="image/png" sizes="16x16" href="/icon-16px.png" />
       <link rel="apple-touch-icon" sizes="180x180" href="/icon-180px.jpg" />
 
+      {/* Preload fonts */}
+      <link
+        rel="preload"
+        href="/fonts/lexend-exa-500.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin=""
+      />
+      <link
+        rel="preload"
+        href="/fonts/lexend-500.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin=""
+      />
+      <link
+        rel="preload"
+        href="/fonts/lexend-400.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin=""
+      />
+
       {/* Open Graph metadata */}
       <meta property="og:type" content={ogType.value} />
       <meta property="og:url" content={location.url.href} />