chore: Update font stack

Get fonts from fontsource: Removes requirements to check in fonts while still self-hosting them.
Fonts can also receive updates through npm.
Use Roboto in addition to the standard tailwind font stack: Instead of falling back to only
Helvetica Neue and sans-serif, use the tailwind defaults if other fonts could not be loaded.
Add the bold (700) variation of Roboto: Previously, browsers were approximating the bold version.
This caused some weird font rendering issues on bold text.
Move to Material Symbols: Google's old icon font (Material Icons) is deprecated. Theoretically,
Material Symbols also supports a variable version with customizable fill, weight, etc but as this
version is 3MB, I've decided to go with a static version of it.

Closes #1744

.pre-commit-config.yaml

@@ -87,6 +87,7 @@ repos:
           - '[email protected]'
           - 'prettier-plugin-tailwindcss@^0.6.6'
           - '@trivago/prettier-plugin-sort-imports@^4.3.0'
+          - 'tailwindcss@^3.4.10'
   - repo: https://github.com/Lucas-C/pre-commit-hooks
     rev: v1.5.5
     hooks:

frontend/.storybook/preview.ts

@@ -13,6 +13,7 @@ import type { Preview } from '@storybook/angular';
 import { applicationConfig } from '@storybook/angular';
 import { ToastrModule } from 'ngx-toastr';
 import docJson from '../documentation.json';
+import { IconModule } from '../src/app/icon.module';
 
 setCompodocJson(docJson);
 
@@ -41,6 +42,7 @@ const preview: Preview = {
             includeTitleDuplicates: true,
           }),
           RouterModule.forRoot([]),
+          IconModule,
         ),
         importProvidersFrom(BrowserAnimationsModule),
         { provide: MatDialogRef, useValue: {} },

frontend/package.json

@@ -25,6 +25,8 @@
     "@angular/platform-browser": "~18.2.3",
     "@angular/platform-browser-dynamic": "~18.2.3",
     "@angular/router": "~18.2.3",
+    "@fontsource/material-symbols-outlined": "^5.0.41",
+    "@fontsource/roboto": "^5.0.15",
     "@ngneat/until-destroy": "^10.0.0",
     "@panzoom/panzoom": "^4.5.1",
     "file-saver": "^2.0.5",

frontend/src/app/icon.module.ts

@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { NgModule } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+
+@NgModule({})
+export class IconModule {
+  constructor(private matIconReg: MatIconRegistry) {
+    this.matIconReg.setDefaultFontSetClass('material-symbols-outlined');
+  }
+}

frontend/src/main.ts

@@ -17,6 +17,7 @@ import { AppRoutingModule } from './app/app-routing.module';
 import { AppComponent } from './app/app.component';
 import { AuthInterceptor } from './app/general/auth/http-interceptor/auth.interceptor';
 import { ErrorHandlingInterceptor } from './app/general/error-handling/error-handling.interceptor';
+import { IconModule } from './app/icon.module';
 import { environment } from './environments/environment';
 
 if (environment.production) {
@@ -38,6 +39,7 @@ bootstrapApplication(AppComponent, {
         resetTimeoutOnDuplicate: true,
         includeTitleDuplicates: true,
       }),
+      IconModule,
     ),
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
     {

frontend/src/styles.css

@@ -5,71 +5,25 @@
 
 /* You can add global styles to this file, and also import other style files */
 
+@import "@fontsource/roboto/300.css";
+@import "@fontsource/roboto/400.css";
+@import "@fontsource/roboto/500.css";
+@import "@fontsource/roboto/700.css";
+@import "@fontsource/material-symbols-outlined/400.css";
+
 @tailwind base;
 @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";
+/* Copied from https://fontsource.org/docs/getting-started/material-symbols */
+.material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
   font-weight: normal;
   font-style: normal;
   font-size: 24px; /* Preferred icon size */
@@ -80,14 +34,6 @@ body {
   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 {
@@ -97,7 +43,6 @@ html {
 
 body {
   @apply m-0;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
 a {

frontend/tailwind.config.js

@@ -2,12 +2,16 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+const defaultTheme = require("tailwindcss/defaultTheme");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{html,ts}"],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ["Roboto", ...defaultTheme.fontFamily.sans],
+      },
       colors: {
         primary: "var(--primary-color)",
         error: "var(--error-color)",