feat: Self-host Roboto and Material Icons font

Before, fonts were loaded via Google Fonts. This is an external dependency and not compliant with GDPR. Therefore, self-host required fonts.
DSD-DBS · May 10, 2024 · d2052a5 · d2052a5
1 parent 928385c
commit d2052a5
Show file tree

Hide file tree

Showing 18 changed files with 90 additions and 24 deletions.
diff --git a/frontend/.storybook/preview-head.html b/frontend/.storybook/preview-head.html
diff --git a/frontend/angular.json b/frontend/angular.json
@@ -29,7 +29,7 @@
             "browser": "src/main.ts",
             "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": ["src/favicon.ico", "src/assets", "src/fonts"],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
               "monaco-editor/min/vs/editor/editor.main.css",
@@ -91,7 +91,6 @@
                   "with": "src/environments/environment.storybook.ts"
                 }
               ]
-
             }
           },
           "defaultConfiguration": "production"

diff --git a/frontend/src/fonts/material-icons-v142-latin-regular.woff2 b/frontend/src/fonts/material-icons-v142-latin-regular.woff2
diff --git a/frontend/src/fonts/material-icons-v142-latin-regular.woff2.license b/frontend/src/fonts/material-icons-v142-latin-regular.woff2.license
@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Copyright Material Icons Authors
+SPDX-License-Identifier: Apache-2.0
diff --git a/frontend/src/fonts/roboto-v30-latin-300.woff2 b/frontend/src/fonts/roboto-v30-latin-300.woff2
diff --git a/frontend/src/fonts/roboto-v30-latin-300.woff2.license b/frontend/src/fonts/roboto-v30-latin-300.woff2.license
@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Copyright Christian Robertson
+SPDX-License-Identifier: Apache-2.0
diff --git a/frontend/src/fonts/roboto-v30-latin-300italic.woff2 b/frontend/src/fonts/roboto-v30-latin-300italic.woff2
diff --git a/frontend/src/fonts/roboto-v30-latin-300italic.woff2.license b/frontend/src/fonts/roboto-v30-latin-300italic.woff2.license
@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Copyright Christian Robertson
+SPDX-License-Identifier: Apache-2.0
diff --git a/frontend/src/fonts/roboto-v30-latin-500.woff2 b/frontend/src/fonts/roboto-v30-latin-500.woff2
diff --git a/frontend/src/fonts/roboto-v30-latin-500.woff2.license b/frontend/src/fonts/roboto-v30-latin-500.woff2.license
@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Copyright Christian Robertson
+SPDX-License-Identifier: Apache-2.0
diff --git a/frontend/src/fonts/roboto-v30-latin-500italic.woff2 b/frontend/src/fonts/roboto-v30-latin-500italic.woff2
diff --git a/frontend/src/fonts/roboto-v30-latin-500italic.woff2.license b/frontend/src/fonts/roboto-v30-latin-500italic.woff2.license
@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Copyright Christian Robertson
+SPDX-License-Identifier: Apache-2.0
diff --git a/frontend/src/fonts/roboto-v30-latin-italic.woff2 b/frontend/src/fonts/roboto-v30-latin-italic.woff2
diff --git a/frontend/src/fonts/roboto-v30-latin-italic.woff2.license b/frontend/src/fonts/roboto-v30-latin-italic.woff2.license
@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Copyright Christian Robertson
+SPDX-License-Identifier: Apache-2.0
diff --git a/frontend/src/fonts/roboto-v30-latin-regular.woff2 b/frontend/src/fonts/roboto-v30-latin-regular.woff2
diff --git a/frontend/src/fonts/roboto-v30-latin-regular.woff2.license b/frontend/src/fonts/roboto-v30-latin-regular.woff2.license
@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Copyright Christian Robertson
+SPDX-License-Identifier: Apache-2.0
diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -11,15 +11,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>
     <app-root></app-root>

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -9,12 +9,87 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  @font-face {
+    font-display: swap;
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    src: url("fonts/roboto-v30-latin-300.woff2") format("woff2");
+  }
+  @font-face {
+    font-display: swap;
+    font-family: "Roboto";
+    font-style: italic;
+    font-weight: 300;
+    src: url("fonts/roboto-v30-latin-300italic.woff2") format("woff2");
+  }
+  @font-face {
+    font-display: swap;
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    src: url("fonts/roboto-v30-latin-regular.woff2") format("woff2");
+  }
+  @font-face {
+    font-display: swap;
+    font-family: "Roboto";
+    font-style: italic;
+    font-weight: 400;
+    src: url("fonts/roboto-v30-latin-italic.woff2") format("woff2");
+  }
+  @font-face {
+    font-display: swap;
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    src: url("fonts/roboto-v30-latin-500.woff2") format("woff2");
+  }
+  @font-face {
+    font-display: swap;
+    font-family: "Roboto";
+    font-style: italic;
+    font-weight: 500;
+    src: url("fonts/roboto-v30-latin-500italic.woff2") format("woff2");
+  }
+  @font-face {
+    font-display: swap;
+    font-family: "Material Icons";
+    font-style: normal;
+    font-weight: 400;
+    src: url("fonts/material-icons-v142-latin-regular.woff2") format("woff2");
+  }
+}
+
 html,
 body {
   height: 100%;
   font-size: 100%;
 }
 
+/* Copied from https://developers.google.com/fonts/docs/material_icons#setup_method_2_self_hosting */
+.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;
+}
+
 html {
   overflow-y: scroll;
 }