diff --git a/frontend/.storybook/preview-head.html b/frontend/.storybook/preview-head.html
deleted file mode 100644
index a41803f00..000000000
--- a/frontend/.storybook/preview-head.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!--
- ~ SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- ~ SPDX-License-Identifier: Apache-2.0
- -->
-
-<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"
-/>
diff --git a/frontend/angular.json b/frontend/angular.json
index a193f80a9..2586f9f64 100644
--- 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
new file mode 100644
index 000000000..5492a6e75
Binary files /dev/null and b/frontend/src/fonts/material-icons-v142-latin-regular.woff2 differ
diff --git a/frontend/src/fonts/material-icons-v142-latin-regular.woff2.license b/frontend/src/fonts/material-icons-v142-latin-regular.woff2.license
new file mode 100644
index 000000000..0d829140d
--- /dev/null
+++ 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
new file mode 100644
index 000000000..60681387e
Binary files /dev/null and b/frontend/src/fonts/roboto-v30-latin-300.woff2 differ
diff --git a/frontend/src/fonts/roboto-v30-latin-300.woff2.license b/frontend/src/fonts/roboto-v30-latin-300.woff2.license
new file mode 100644
index 000000000..12e6229f4
--- /dev/null
+++ 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
new file mode 100644
index 000000000..22c57b015
Binary files /dev/null and b/frontend/src/fonts/roboto-v30-latin-300italic.woff2 differ
diff --git a/frontend/src/fonts/roboto-v30-latin-300italic.woff2.license b/frontend/src/fonts/roboto-v30-latin-300italic.woff2.license
new file mode 100644
index 000000000..12e6229f4
--- /dev/null
+++ 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
new file mode 100644
index 000000000..29342a8de
Binary files /dev/null and b/frontend/src/fonts/roboto-v30-latin-500.woff2 differ
diff --git a/frontend/src/fonts/roboto-v30-latin-500.woff2.license b/frontend/src/fonts/roboto-v30-latin-500.woff2.license
new file mode 100644
index 000000000..12e6229f4
--- /dev/null
+++ 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
new file mode 100644
index 000000000..ae1933f38
Binary files /dev/null and b/frontend/src/fonts/roboto-v30-latin-500italic.woff2 differ
diff --git a/frontend/src/fonts/roboto-v30-latin-500italic.woff2.license b/frontend/src/fonts/roboto-v30-latin-500italic.woff2.license
new file mode 100644
index 000000000..12e6229f4
--- /dev/null
+++ 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
new file mode 100644
index 000000000..e1b7a79f9
Binary files /dev/null and b/frontend/src/fonts/roboto-v30-latin-italic.woff2 differ
diff --git a/frontend/src/fonts/roboto-v30-latin-italic.woff2.license b/frontend/src/fonts/roboto-v30-latin-italic.woff2.license
new file mode 100644
index 000000000..12e6229f4
--- /dev/null
+++ 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
new file mode 100644
index 000000000..020729ef8
Binary files /dev/null and b/frontend/src/fonts/roboto-v30-latin-regular.woff2 differ
diff --git a/frontend/src/fonts/roboto-v30-latin-regular.woff2.license b/frontend/src/fonts/roboto-v30-latin-regular.woff2.license
new file mode 100644
index 000000000..12e6229f4
--- /dev/null
+++ 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
index 8df1ae794..0f9759964 100644
--- 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
index e64e45ea9..93beb6ba7 100644
--- 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;
 }