Self-host all fonts

lberrymage · lberrymage · commit 5f8ae5f45330 · 2026-02-23T20:55:01.000Z
Using the Google Fonts CDN without user consent has been found to violate the GDPR (https://rewis.io/urteile/urteil/lhm-20-01-2022-3-o-1749320/), making it either legally risky or unnecessarily difficult to use. To resolve this issue, bundle the fonts we use into our application using Fontsource instead of using the Google Fonts CDN. This change has multiple other benefits as well, such as: - Font versioning, meaning our fonts aren't automatically upgraded without notice, our visuals are deterministic, etc. - The console now has no third-party service dependencies, making it theoretically usable in an isolated environment without internet access. - Particularly privacy-conscious users feel their privacy is better respected. Since Fontsource distributes fonts as npm packages, we can more or less automatically get font updates using our regular package update systems without checking binary font files into version control. Closes #58
diff --git a/angular.json b/angular.json
@@ -31,6 +31,8 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/@fontsource-variable/roboto/index.css",
+              "node_modules/@fontsource/material-icons/index.css",
               "src/styles.scss"
             ],
             "scripts": [],
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,8 @@
     "@angular/platform-browser": "^20.0.6",
     "@angular/platform-browser-dynamic": "^20.0.6",
     "@angular/router": "^20.0.6",
+    "@fontsource-variable/roboto": "^5.2.10",
+    "@fontsource/material-icons": "^5.2.7",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.1"
diff --git a/src/index.html b/src/index.html
@@ -12,9 +12,6 @@
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body class="mat-typography">
     <acc-root></acc-root>
diff --git a/src/styles.scss b/src/styles.scss
@@ -17,7 +17,7 @@ html {
             primary: theme.$primary-palette,
             tertiary: theme.$tertiary-palette,
         ),
-        typography: Roboto,
+        typography: "Roboto Variable",
         density: 0,
     ));
 }
@@ -37,4 +37,32 @@ body {
 }
 
 html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+body { margin: 0; font-family: "Roboto Variable", "Helvetica Neue", sans-serif; }
+
+// Sourced verbatim from
+// https://developers.google.com/fonts/docs/material_icons#setup_method_2_self_hosting (which is
+// repeated at https://fontsource.org/docs/getting-started/material-icons)
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;  /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+}
