feat(fonts): replace Google Fonts with bundled font imports and update typography settings

apps/web/src/index.html

@@ -20,11 +20,6 @@
         <link rel="manifest" href="manifest.webmanifest" />
         <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png" />
         <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&family=JetBrains+Mono:wght@400;500&family=Crimson+Pro:wght@400;600;700&family=DM+Sans:wght@400;500;600&family=Material+Icons&display=swap"
-            rel="stylesheet"
-        />
         <script>
             if (global === undefined) {
                 var global = window;

apps/web/src/m3-theme.scss

@@ -6,8 +6,11 @@
 @include mat.app-background();
 
 // ─── Typography ─────────────────────────────────────────────────────────────
+$app-font-stack:
+    "'DM Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif";
+
 $my-typography: mat.m2-define-typography-config(
-    $font-family: "'DM Sans', 'Inter', sans-serif",
+    $font-family: $app-font-stack,
 );
 @include mat.typography-hierarchy($my-typography);
 
@@ -20,8 +23,8 @@ $light-theme: mat.define-theme(
             tertiary: mat.$cyan-palette,
         ),
         typography: (
-            plain-family: "'DM Sans', 'Inter', sans-serif",
-            brand-family: "'DM Sans', 'Inter', sans-serif",
+            plain-family: $app-font-stack,
+            brand-family: $app-font-stack,
         ),
     )
 );
@@ -34,8 +37,8 @@ $dark-theme: mat.define-theme(
             tertiary: mat.$cyan-palette,
         ),
         typography: (
-            plain-family: "'DM Sans', 'Inter', sans-serif",
-            brand-family: "'DM Sans', 'Inter', sans-serif",
+            plain-family: $app-font-stack,
+            brand-family: $app-font-stack,
         ),
     )
 );

apps/web/src/styles.scss

@@ -9,9 +9,20 @@
 
 // ─── Third-party ─────────────────────────────────────────────────────────────
 @import '@yangkghjh/videojs-aspect-ratio-panel/dist/videojs-aspect-ratio-panel.css';
+@import 'material-design-icons-iconfont/dist/material-design-icons.css';
 
-// ─── Google Fonts ─────────────────────────────────────────────────────────────
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+// ─── Bundled Fonts ────────────────────────────────────────────────────────────
+@import '@fontsource/dm-sans/400.css';
+@import '@fontsource/dm-sans/500.css';
+@import '@fontsource/dm-sans/600.css';
+@import '@fontsource/roboto/300.css';
+@import '@fontsource/roboto/400.css';
+@import '@fontsource/roboto/500.css';
+@import '@fontsource/jetbrains-mono/400.css';
+@import '@fontsource/jetbrains-mono/500.css';
+@import '@fontsource/crimson-pro/400.css';
+@import '@fontsource/crimson-pro/600.css';
+@import '@fontsource/crimson-pro/700.css';
 
 // ─── Shared Components ────────────────────────────────────────────────────────
 
@@ -31,9 +42,13 @@ html {
     padding: 0;
     height: 100%;
     font-family:
-        'Inter',
+        'DM Sans',
         'Roboto',
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
         'Helvetica Neue',
+        Arial,
         sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;