From 33b527c8f235ca4106ca349c6a57a99430055e79 Mon Sep 17 00:00:00 2001
From: satnaing <satnaingdev@gmail.com>
Date: Tue, 19 Dec 2023 11:58:16 +0630
Subject: [PATCH] fix: eliminate render-blocking google font

Eliminate render-blocking Google font by loading the font asynchronously.
---
 src/layouts/Layout.astro | 14 ++++++++++++++
 tailwind.config.cjs      |  6 +++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 5fa9c271c..836537d2b 100644
--- 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
index 8e4386095..40cb2414e 100644
--- 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: {