diff --git a/assets/fonts.scss b/assets/fonts.scss
index 13e61b7..30e20d0 100644
--- a/assets/fonts.scss
+++ b/assets/fonts.scss
@@ -1,8 +1,47 @@
-
-@font-face {
-    font-family: 'Overpass';
-    src: url('/Overpass/Overpass-VariableFont_wght.ttf');
+@mixin font-face($family, $file, $weight: normal, $style: normal) {
+    @font-face {
+        font-family: $family;
+        src: url($file);
+        font-weight: $weight;
+        font-style: $style;
+    }
 }
+
+// assets/Overpass/static/Overpass-ExtraLight.ttf 
+// assets/Overpass/static/Overpass-ExtraLightItalic.ttf 
+// assets/Overpass/static/Overpass-Light.ttf 
+// assets/Overpass/static/Overpass-LightItalic.ttf 
+// assets/Overpass/static/Overpass-Medium.ttf 
+// assets/Overpass/static/Overpass-MediumItalic.ttf 
+// assets/Overpass/static/Overpass-Italic.ttf 
+// assets/Overpass/static/Overpass-Regular.ttf 
+// assets/Overpass/static/Overpass-SemiBold.ttf 
+// assets/Overpass/static/Overpass-SemiBoldItalic.ttf 
+// assets/Overpass/static/Overpass-Thin.ttf 
+// assets/Overpass/static/Overpass-ThinItalic.ttf
+// assets/Overpass/static/Overpass-Black.ttf 
+// assets/Overpass/static/Overpass-BlackItalic.ttf 
+// assets/Overpass/static/Overpass-Bold.ttf 
+// assets/Overpass/static/Overpass-BoldItalic.ttf 
+// assets/Overpass/static/Overpass-ExtraBold.ttf 
+// assets/Overpass/static/Overpass-ExtraBoldItalic.ttf
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Thin.ttf', 100);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-ThinItalic.ttf', 100, italic);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-ExtraLight.ttf', 200);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-ExtraLightItalic.ttf', 200, italic);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Light.ttf', 300);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-LightItalic.ttf', 300, italic);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Regular.ttf', 400);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Italic.ttf', 400, italic);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Medium.ttf', 500);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-MediumItalic.ttf', 500, italic);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-SemiBold.ttf', 600);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-SemiBoldItalic.ttf', 600, italic);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Bold.ttf', 700);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-BoldItalic.ttf', 700, italic);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Black.ttf', 800);
+@include font-face("Overpass", '~/assets/Overpass/static/Overpass-BlackItalic.ttf', 800, italic);
+
 // 100 – Thin.
 // 200 – Extra Light (Ultra Light)
 // 300 – Light.
@@ -11,79 +50,78 @@
 // 600 – Semi Bold (Demi Bold)
 // 700 – Bold.
 // 800 – Extra Bold (Ultra Bold)
-
 @font-face {
     font-family: 'Roboto';
-    src: url('/Roboto/Roboto-Black.ttf ');
+    src: url('~/assets/Roboto/Roboto-Black.ttf ');
     font-weight: 800;
 }
 
 @font-face {
     font-family: 'Roboto';
-    src: url('/Roboto/Roboto-BlackItalic.ttf ');
+    src: url('~/assets/Roboto/Roboto-BlackItalic.ttf ');
     font-weight: 800;
     font-style: italic
 }
 
 @font-face {
     font-family: 'Roboto';
-    src: url('/Roboto/Roboto-Bold.ttf ');
+    src: url('~/assets/Roboto/Roboto-Bold.ttf ');
     font-weight: 700;
 }
 
 @font-face {
     font-family: 'Roboto';
-    src: url('/Roboto/Roboto-BoldItalic.ttf ');
+    src: url('~/assets/Roboto/Roboto-BoldItalic.ttf ');
     font-weight: 700;
     font-style: italic
 }
 
 @font-face {
     font-family: 'Roboto';
-    src: url('/Roboto/Roboto-Regular.ttf ');
+    src: url('~/assets/Roboto/Roboto-Regular.ttf ');
 }
 
 @font-face {
     font-family: 'Roboto';
-    src: url('/Roboto/Roboto-Italic.ttf ');
+    src: url('~/assets/Roboto/Roboto-Italic.ttf ');
     font-style: italic
 }
 
 @font-face {
     font-family: 'Roboto';
-    src: url('/Roboto/Roboto-Medium.ttf ');
+    src: url('~/assets/Roboto/Roboto-Medium.ttf ');
     font-weight: 500;
 }
 
 @font-face {
     font-family: 'Roboto';
-    src: url('/Roboto/Roboto-MediumItalic.ttf ');
+    src: url('~/assets/Roboto/Roboto-MediumItalic.ttf ');
     font-weight: 500;
     font-style: italic
 }
 
 @font-face {
     font-family: 'Roboto';
-    src: url('/Roboto/Roboto-Light.ttf ');
+    src: url('~/assets/Roboto/Roboto-Light.ttf ');
     font-weight: 300;
 }
 
 @font-face {
     font-family: 'Roboto';
-    src: url('/Roboto/Roboto-LightItalic.ttf ');
+    src: url('~/assets/Roboto/Roboto-LightItalic.ttf ');
     font-weight: 300;
     font-style: italic
 }
 
 @font-face {
     font-family: 'Roboto';
-    src: url('/Roboto/Roboto-Thin.ttf ');
+    src: url('~/assets/Roboto/Roboto-Thin.ttf ');
     font-weight: 100;
 }
 
 @font-face {
     font-family: 'Roboto';
-    src: url('/Roboto/Roboto-ThinItalic.ttf ');
+    src: url('~/assets/Roboto/Roboto-ThinItalic.ttf ');
     font-weight: 100;
     font-style: italic
-}
+}
\ No newline at end of file