From acb963da17d608605afef7ae78ed8840cd4152de Mon Sep 17 00:00:00 2001
From: JingWen Fan <106414602+study8677@users.noreply.github.com>
Date: Fri, 22 May 2026 13:39:07 +0800
Subject: [PATCH] fix: load Google Fonts non-blocking to prevent blank page
 where the CDN is blocked

A render-blocking <link rel="stylesheet"> to fonts.googleapis.com holds back
first paint until the request resolves. Where that host is throttled or
null-routed (mainland China), the request hangs for tens of seconds and the
page stays fully blank even though the JS bundle loaded and React mounted.

Switch to a non-blocking load (media="print" + onload="this.media='all'") with
a <noscript> blocking fallback for crawlers, so the page paints immediately
with system fallback fonts and upgrades to the webfonts once (if) they arrive.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/index.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index c6072ec..ab1e038 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -46,7 +46,13 @@
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Non-blocking webfont load: a render-blocking Google Fonts stylesheet can
+         leave the page blank for many seconds where fonts.googleapis.com is
+         throttled/null-routed (e.g. mainland China). media="print" + onload lets
+         the page paint immediately with fallback fonts and upgrade once loaded;
+         <noscript> keeps a blocking copy for crawlers / no-JS clients. -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" media="print" onload="this.media='all'">
+    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"></noscript>
     <script>
       document.documentElement.classList.add("js");
     </script>