perf: move Google Fonts from CSS @import to HTML link tags

Replace render-blocking CSS @import statements with HTML link tags:
- Material Icons loaded normally with display=swap for icon FOUT prevention
- VT323 (used only in origin story modal) uses media="print" swap
  technique for truly non-blocking loading
- Add noscript fallback for VT323

This eliminates the render-blocking behavior of CSS @import and allows
fonts to load in parallel with other resources.

Author: msujaws

index.html

@@ -23,6 +23,24 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="preconnect" href="https://bugzilla.mozilla.org" />
 
+    <!-- Google Fonts - loaded as link tags to avoid render-blocking CSS @import -->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=VT323&display=swap"
+      media="print"
+      onload="this.media='all'"
+    />
+    <noscript>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=VT323&display=swap"
+      />
+    </noscript>
+
     <!-- Favicons -->
     <link rel="icon" type="image/png" href="/favicon.png" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />

src/index.css

@@ -1,8 +1,4 @@
-/* Load Google Material Icons */
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
-
-/* Load VT323 retro font for origin story */
-@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
+/* Google Fonts are loaded via link tags in index.html to avoid render-blocking */
 
 @tailwind base;
 @tailwind components;