move font-face for roboto zero/mono to separate file

src/support/styles/Fonts.js

@@ -28,7 +28,26 @@ import KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP from '../fonts/roboto/regular/KFOlCnqEu9
 import KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP from '../fonts/roboto/regular/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2';
 import KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ from '../fonts/roboto/regular/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2';
 
+import RobotoZero from '../fonts/roboto/RobotoZero.woff';
+import RobotoMono from '../fonts/roboto/RobotoMonoRegular.woff2';
+
 const fontStyles = css`
+    /* 
+        custom Roboto with Zero without the thing inside, so it's more readable as number
+        since 0 doesn't look too similar to 8
+    */
+
+    @font-face {
+        font-family: 'Roboto Zero';
+        src: url(${RobotoZero}) format('woff');
+    }
+
+    @font-face {
+        font-family: 'Roboto Mono';
+        font-style: normal;
+        src: url(${RobotoMono}) format('woff2'), /* Super Modern Browsers */
+    }
+
     /* cyrillic-ext */
     
     @font-face {

src/support/styles/index.js

@@ -47,30 +47,6 @@ const baseStyles = createGlobalStyle`
         height: 100%;
     }
 
-    /* 
-        custom Roboto with Zero without the thing inside, so it's more readable as number
-        since 0 doesn't look too similar to 8
-    */
-
-    @font-face {
-        font-family: 'Roboto Zero';
-        src: url('/fonts/roboto/RobotoZero.eot') format('embedded-opentype'),
-            url('/fonts/roboto/RobotoZero.eot?#iefix') format('embedded-opentype'),
-            url('/fonts/roboto/RobotoZero.woff') format('woff'),
-            url('/fonts/roboto/RobotoZero.ttf') format('truetype');
-    }
-
-    @font-face {
-        font-family: 'Roboto Mono';
-        font-style: normal;
-        src:url('/fonts/roboto/RobotoMonoRegular.eot') format('embedded-opentype'), /* IE9 Compat Modes */
-            url('/fonts/roboto/RobotoMonoRegular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-            url('/fonts/roboto/RobotoMonoRegular.woff2') format('woff2'), /* Super Modern Browsers */
-            url('/fonts/roboto/RobotoMonoRegular.woff') format('woff'), /* Modern Browsers */
-            url('/fonts/roboto/RobotoMonoRegular.ttf') format('truetype'), /* Safari, Android, iOS */
-            url('/fonts/roboto/RobotoMonoRegular.svg#RobotoMono') format('svg'); /* Legacy iOS */
-    }
-
     ${fontStyles};
     ${animationStyles};
     ${tooltipStyles};