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

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/app.component.ts

@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { NgIf, NgClass, AsyncPipe } from '@angular/common';
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
 import {
   MatSidenav,
   MatDrawerContainer,
@@ -39,11 +40,12 @@ import { FullscreenService } from './sessions/service/fullscreen.service';
     AsyncPipe,
   ],
 })
-export class AppComponent implements AfterViewInit {
+export class AppComponent implements AfterViewInit, OnInit {
   constructor(
     public pageLayoutService: PageLayoutService,
     public fullscreenService: FullscreenService,
     private navBarService: NavBarService,
+    private matIconReg: MatIconRegistry,
   ) {
     slugify.extend({ '.': '-' });
   }
@@ -54,6 +56,10 @@ export class AppComponent implements AfterViewInit {
     this.navBarService.sidenav = this.sidenav;
   }
 
+  ngOnInit() {
+    this.matIconReg.setDefaultFontSetClass('material-symbols-outlined');
+  }
+
   constructMinHeight(): string {
     let stmt = 'calc(100vh - 16px'; // Subtract margin of body
     if (this.pageLayoutService.showNavbar) {

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)",