diff --git a/src/res/css/common.scss b/src/res/css/common.scss
index 25bac41..33458a1 100644
--- a/src/res/css/common.scss
+++ b/src/res/css/common.scss
@@ -1,6 +1,5 @@
 @import "colors.scss";
-@import "/res/css/font/overpass.css";
-@import "/res/css/font/overpass-mono.css";
+@import "fonts.scss";
 @import "flex.scss";
 // @import "form.scss";
 
diff --git a/src/res/css/font/overpass-mono.css b/src/res/css/font/overpass-mono.css
index c751e5e..e69de29 100644
--- a/src/res/css/font/overpass-mono.css
+++ b/src/res/css/font/overpass-mono.css
@@ -1,29 +0,0 @@
-@font-face {
-  font-family: 'overpass-mono';
-  src: url('../../fonts/overpass-mono-webfont/overpass-mono-light.woff2') format('woff2');
-       font-weight: 300;
-       font-style: normal;
-}
-
-@font-face {
-  font-family: 'overpass-mono';
-  src: url('../../fonts/overpass-mono-webfont/overpass-mono-regular.woff2') format('woff2');
-       font-weight: 400;
-       font-style: normal;
-}
-
-@font-face {
-  font-family: 'overpass-mono';
-  src: url('../../fonts/overpass-mono-webfont/overpass-mono-semibold.woff2') format('woff2');
-       font-weight: 500;
-       font-style: normal;
-}
-
-
-
-@font-face {
-  font-family: 'overpass-mono';
-  src: url('../../fonts/overpass-mono-webfont/overpass-mono-bold.woff2') format('woff2');
-       font-weight: 600;
-       font-style: normal;
-}
diff --git a/src/res/css/fonts.scss b/src/res/css/fonts.scss
new file mode 100644
index 0000000..5c50ef2
--- /dev/null
+++ b/src/res/css/fonts.scss
@@ -0,0 +1,111 @@
+@font-face {
+  font-family: 'Overpass';
+  src: url('/res/fonts/overpass-webfont/overpass-thin.woff2') format('woff2'); /* Super Modern Browsers */
+       font-weight: 200;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'Overpass';
+  src: url('/res/fonts/overpass-webfont/overpass-thin-italic.woff2') format('woff2');
+       font-weight: 200;
+       font-style: italic;
+}
+
+@font-face {
+  font-family: 'Overpass';
+  src: url('/res/fonts/overpass-webfont/overpass-extralight.woff2') format('woff2');
+       font-weight: 300;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'Overpass';
+  src: url('/res/fonts/overpass-webfont/overpass-extralight-italic.woff2') format('woff2');
+       font-weight: 300;
+       font-style: italic;
+}
+
+@font-face {
+  font-family: 'Overpass';
+  src: url('/res/fonts/overpass-webfont/overpass-light.woff2') format('woff2');
+       font-weight: 400;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'Overpass';
+  src: url('/res/fonts/overpass-webfont/overpass-light-italic.woff2') format('woff2');
+       font-weight: 400;
+       font-style: italic;
+}
+
+@font-face {
+  font-family: 'Overpass';
+  src: url('/res/fonts/overpass-webfont/overpass-regular.woff2') format('woff2');
+       font-weight: 500;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'Overpass';
+  src: url('/res/fonts/overpass-webfont/overpass-italic.woff2') format('woff2');
+       font-weight: 500;
+       font-style: italic;
+}
+
+@font-face {
+  font-family: 'Overpass';
+  src: url('/res/fonts/overpass-webfont/overpass-semibold.woff2') format('woff2');
+       font-weight: 600;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'Overpass';
+  src: url('/res/fonts/overpass-webfont/overpass-semibold-italic.woff2') format('woff2');
+       font-weight: 600;
+       font-style: italic;
+}
+
+@font-face {
+  font-family: 'Overpass';
+  src: url('/res/fonts/overpass-webfont/overpass-bold.woff2') format('woff2');
+       font-weight: 700;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'Overpass';
+  src: url('/res/fonts/overpass-webfont/overpass-bold-italic.woff2') format('woff2');
+       font-weight: 700;
+       font-style: italic;
+}
+
+@font-face {
+  font-family: 'Overpass mono';
+  src: url('/res/fonts/overpass-mono-webfont/overpass-mono-light.woff2') format('woff2');
+       font-weight: 300;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'Overpass mono';
+  src: url('/res/fonts/overpass-mono-webfont/overpass-mono-regular.woff2') format('woff2');
+       font-weight: 400;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'Overpass mono';
+  src: url('/res/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2') format('woff2');
+       font-weight: 500;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'Overpass mono';
+  src: url('/res/fonts/overpass-mono-webfont/overpass-mono-bold.woff2') format('woff2');
+       font-weight: 600;
+       font-style: normal;
+}
diff --git a/src/res/fonts/overpass-mono-webfont/overpass-mono.css b/src/res/fonts/overpass-mono-webfont/overpass-mono.css
deleted file mode 100644
index d380209..0000000
--- a/src/res/fonts/overpass-mono-webfont/overpass-mono.css
+++ /dev/null
@@ -1,51 +0,0 @@
-
-
-@font-face {
-  font-family: 'overpass-mono';
-  src: url('overpass-mono-light.eot');
-  src: url('overpass-mono-light.eot?#iefix') format('embedded-opentype'),
-       url('overpass-mono-light.woff2') format('woff2'),
-       url('overpass-mono-light.woff') format('woff'),
-       url('overpass-mono-light.ttf')  format('truetype');
-       font-weight: 300;
-       font-style: normal;
-}
-
-
-
-@font-face {
-  font-family: 'overpass-mono';
-  src: url('overpass-mono-regular.eot');
-  src: url('overpass-mono-regular.eot?#iefix') format('embedded-opentype'),
-       url('overpass-mono-regular.woff2') format('woff2'),
-       url('overpass-mono-regular.woff') format('woff'),
-       url('overpass-mono-regular.ttf')  format('truetype');
-       font-weight: 400;
-       font-style: normal;
-}
-
-
-
-@font-face {
-  font-family: 'overpass-mono';
-  src: url('overpass-mono-semibold.eot');
-  src: url('overpass-mono-semibold.eot?#iefix') format('embedded-opentype'),
-       url('overpass-mono-semibold.woff2') format('woff2'),
-       url('overpass-mono-semibold.woff') format('woff'),
-       url('overpass-mono-semibold.ttf')  format('truetype');
-       font-weight: 500;
-       font-style: normal;
-}
-
-
-
-@font-face {
-  font-family: 'overpass-mono';
-  src: url('overpass-mono-bold.eot');
-  src: url('overpass-mono-bold.eot?#iefix') format('embedded-opentype'),
-       url('overpass-mono-bold.woff2') format('woff2'),
-       url('overpass-mono-bold.woff') format('woff'),
-       url('overpass-mono-bold.ttf')  format('truetype');
-       font-weight: 600;
-       font-style: normal;
-}
diff --git a/src/res/fonts/overpass-webfont/overpass.css b/src/res/fonts/overpass-webfont/overpass.css
deleted file mode 100644
index 356c985..0000000
--- a/src/res/fonts/overpass-webfont/overpass.css
+++ /dev/null
@@ -1,189 +0,0 @@
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-thin.eot'); /* IE9 Compat Modes */
-  src: url('overpass-thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('overpass-thin.woff2') format('woff2'), /* Super Modern Browsers */
-       url('overpass-thin.woff') format('woff'), /* Pretty Modern Browsers */
-       url('overpass-thin.ttf')  format('truetype'); /* Safari, Android, iOS */
-       font-weight: 200;
-       font-style: normal;
-}
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-thin-italic.eot');
-  src: url('overpass-thin-italic.eot?#iefix') format('embedded-opentype'),
-       url('overpass-thin-italic.woff2') format('woff2'),
-       url('overpass-thin-italic.woff') format('woff'),
-       url('overpass-thin-italic.ttf')  format('truetype');
-       font-weight: 200;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-extralight.eot');
-  src: url('overpass-extralight.eot?#iefix') format('embedded-opentype'),
-       url('overpass-extralight.woff2') format('woff2'),
-       url('overpass-extralight.woff') format('woff'),
-       url('overpass-extralight.ttf')  format('truetype');
-       font-weight: 300;
-       font-style: normal;
-}
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-extralight-italic.eot');
-  src: url('overpass-extralight-italic.eot?#iefix') format('embedded-opentype'),
-       url('overpass-extralight-italic.woff2') format('woff2'),
-       url('overpass-extralight-italic.woff') format('woff'),
-       url('overpass-extralight-italic.ttf')  format('truetype');
-       font-weight: 300;
-       font-style: italic;
-}
-
-
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-light.eot');
-  src: url('overpass-light.eot?#iefix') format('embedded-opentype'),
-       url('overpass-light.woff2') format('woff2'),
-       url('overpass-light.woff') format('woff'),
-       url('overpass-light.ttf')  format('truetype');
-       font-weight: 400;
-       font-style: normal;
-}
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-light-italic.eot');
-  src: url('overpass-light-italic.eot?#iefix') format('embedded-opentype'),
-       url('overpass-light-italic.woff2') format('woff2'),
-       url('overpass-light-italic.woff') format('woff'),
-       url('overpass-light-italic.ttf')  format('truetype');
-       font-weight: 400;
-       font-style: italic;
-}
-
-
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-regular.eot');
-  src: url('overpass-regular.eot?#iefix') format('embedded-opentype'),
-       url('overpass-regular.woff2') format('woff2'),
-       url('overpass-regular.woff') format('woff'),
-       url('overpass-regular.ttf')  format('truetype');
-       font-weight: 500;
-       font-style: normal;
-}
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-italic.eot');
-  src: url('overpass-italic.eot?#iefix') format('embedded-opentype'),
-       url('overpass-italic.woff2') format('woff2'),
-       url('overpass-italic.woff') format('woff'),
-       url('overpass-italic.ttf')  format('truetype');
-       font-weight: 500;
-       font-style: italic;
-}
-
-
-
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-semibold.eot');
-  src: url('overpass-semibold.eot?#iefix') format('embedded-opentype'),
-       url('overpass-semibold.woff2') format('woff2'),
-       url('overpass-semibold.woff') format('woff'),
-       url('overpass-semibold.ttf')  format('truetype');
-       font-weight: 600;
-       font-style: normal;
-}
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-semibold-italic.eot');
-  src: url('overpass-semibold-italic.eot?#iefix') format('embedded-opentype'),
-       url('overpass-semibold-italic.woff2') format('woff2'),
-       url('overpass-semibold-italic.woff') format('woff'),
-       url('overpass-semibold-italic.ttf')  format('truetype');
-       font-weight: 600;
-       font-style: italic;
-}
-
-
-
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-bold.eot');
-  src: url('overpass-bold.eot?#iefix') format('embedded-opentype'),
-       url('overpass-bold.woff2') format('woff2'),
-       url('overpass-bold.woff') format('woff'),
-       url('overpass-bold.ttf')  format('truetype');
-       font-weight: 700;
-       font-style: normal;
-}
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-bold-italic.eot');
-  src: url('overpass-bold-italic.eot?#iefix') format('embedded-opentype'),
-       url('overpass-bold-italic.woff2') format('woff2'),
-       url('overpass-bold-italic.woff') format('woff'),
-       url('overpass-bold-italic.ttf')  format('truetype');
-       font-weight: 700;
-       font-style: italic;
-}
-
-
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-extrabold.eot');
-  src: url('overpass-extrabold.eot?#iefix') format('embedded-opentype'),
-       url('overpass-extrabold.woff2') format('woff2'),
-       url('overpass-extrabold.woff') format('woff'),
-       url('overpass-extrabold.ttf')  format('truetype');
-       font-weight: 800;
-       font-style: normal;
-}
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-extrabold-italic.eot');
-  src: url('overpass-extrabold-italic.eot?#iefix') format('embedded-opentype'),
-       url('overpass-extrabold-italic.woff2') format('woff2'),
-       url('overpass-extrabold-italic.woff') format('woff'),
-       url('overpass-extrabold-italic.ttf')  format('truetype');
-       font-weight: 800;
-       font-style: italic;
-}
-
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-heavy.eot');
-  src: url('overpass-heavy.eot?#iefix') format('embedded-opentype'),
-       url('overpass-heavy.woff2') format('woff2'),
-       url('overpass-heavy.woff') format('woff'),
-       url('overpass-heavy.ttf')  format('truetype');
-       font-weight: 900;
-       font-style: normal;
-}
-
-@font-face {
-  font-family: 'overpass';
-  src: url('overpass-heavy-italic.eot');
-  src: url('overpass-heavy-italic.eot?#iefix') format('embedded-opentype'),
-       url('overpass-heavy-italic.woff2') format('woff2'),
-       url('overpass-heavy-italic.woff') format('woff'),
-       url('overpass-heavy-italic.ttf')  format('truetype');
-       font-weight: 900;
-       font-style: italic;
-}