fix: eliminate render-blocking google font

Eliminate render-blocking Google font by loading the font asynchronously.
satnaing · Dec 19, 2023 · 33b527c · 33b527c
1 parent c526157
commit 33b527c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -59,11 +59,25 @@ const socialImageURL = new URL(
     <!-- Google Font -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="preload"
+      as="style"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap"
+    />
     <link
       href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap"
       rel="stylesheet"
+      media="print"
+      onload="this.media='all'"
     />
 
+    <noscript>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap"
+      />
+    </noscript>
+
     <meta name="theme-color" content="" />
 
     {

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -54,7 +54,11 @@ module.exports = {
         transparent: "transparent",
       },
       fontFamily: {
-        mono: ["IBM Plex Mono", "monospace"],
+        mono: [
+          "IBM Plex Mono", "ui-monospace", "SFMono-Regular", 
+          "Menlo", "Monaco", "Consolas", "Liberation Mono", 
+          "Courier New", "monospace"
+        ],
       },
 
       typography: {