diff --git a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.ts b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.ts
index 71c7b26..657c1d6 100644
--- a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.ts
+++ b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.ts
@@ -58,13 +58,6 @@ export class MultiselectAutocompleteComponent implements OnInit {
       this.rawData.push({ item, selected: false });
     });
 
-    WebFont.load({
-       google: {
-          families: [
-             'Material Icons',
-          ],
-       },
-    });
     //console.log(this.appliedFilters);
     //console.log(this.rawData);
 
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
index 1eee2c8..ee858a7 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
@@ -208,7 +208,6 @@ export class NttGanttComponent implements OnInit {
    * The function ngOnInit sets values which are required for rendering the gantt Chart. Furthermore it triggers the Dataservice to fetch Changes from the backend and trims the resources (Changes Array) and sets the paginator to the first page.
    */
   public ngOnInit(): void {
-    WebFont.load({ google: { families: ['Material Icons',], }, });
     this.renderGantt = false;
     this.firstLoad = true;
     this.sliceStart = 0;
diff --git a/frontend/src/assets/fonts/MaterialIcons-Regular.ttf b/frontend/src/assets/fonts/MaterialIcons-Regular.ttf
new file mode 100644
index 0000000..9d09b0f
Binary files /dev/null and b/frontend/src/assets/fonts/MaterialIcons-Regular.ttf differ
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 29065f2..e7bc076 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -15,6 +15,32 @@
 @import '../node_modules/@syncfusion/ej2-gantt/styles/material.css';
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url('assets/fonts/MaterialIcons-Regular.ttf') format('woff2'),
+       url('assets/fonts/MaterialIcons-Regular.ttf') format('woff'),
+       url('assets/fonts/MaterialIcons-Regular.ttf') format('truetype');
+}
+
+.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;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
 .green-snackbar {
   background: green !important;
   color: white;