Resolves font flicker on route change

- Adds formular css to globally linked css

3 files changed, 5 insertions, 18 deletions

diff --git a/packages/website/public/css/formular.css b/packages/website/public/css/formular.css
index 84f68584c..85549f8c8 100644
--- a/packages/website/public/css/formular.css
+++ b/packages/website/public/css/formular.css
@@ -30,8 +30,8 @@
 @font-face {
     font-family: 'Formular';
     font-weight: 300;
-    src: url('/fonts/formular/3822A0_0_0.eot');
-    src: url('/fonts/formular/3822A0_0_0.eot?#iefix') format('embedded-opentype'), url('/fonts/formular/3822A0_0_0.woff2') format('woff2'), url('/fonts/formular/3822A0_0_0.woff') format('woff'), url('/fonts/formular/3822A0_0_0.ttf') format('truetype');
+    src: url('../fonts/Formular-Light.woff2');
+    src: url('../fonts/Formular-Light.woff2') format('woff2'), url('../fonts/Formular-Light.woff') format('woff');
     font-display: swap;
 }
 
@@ -39,7 +39,7 @@
 @font-face {
     font-family: 'Formular';
     font-weight: 400;
-    src: url('/fonts/formular/3822A0_1_0.eot');
-    src: url('/fonts/formular/3822A0_1_0.eot?#iefix') format('embedded-opentype'), url('/fonts/formular/3822A0_1_0.woff2') format('woff2'), url('/fonts/formular/3822A0_1_0.woff') format('woff'), url('/fonts/formular/3822A0_1_0.ttf') format('truetype');
+    src: url('../fonts/Formular-Regular.woff2');
+    src: url('../fonts/Formular-Regular.woff2') format('woff2'), url('../fonts/Formular-Regular.woff') format('woff');
     font-display: swap;
 }
diff --git a/packages/website/public/index.html b/packages/website/public/index.html
index 585838a64..26ebcdec8 100644
--- a/packages/website/public/index.html
+++ b/packages/website/public/index.html
@@ -17,6 +17,7 @@
         <link rel="stylesheet" href="/css/material-design-iconic-font.min.css" />
         <link rel="stylesheet" href="/css/roboto.css" />
         <link rel="stylesheet" href="/css/roboto_mono.css" />
+        <link rel="stylesheet" href="/css/formular.css" />
         <link rel="stylesheet" href="/css/basscss_responsive_custom.css" />
         <link rel="stylesheet" href="/css/basscss_responsive_padding.css" />
         <link rel="stylesheet" href="/css/basscss_responsive_margin.css" />
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 6844381c9..bf168d344 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -13,20 +13,6 @@ export interface GlobalStyle {
 const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
     ${cssReset};
 
-    @font-face {
-        font-family: "Formular";
-        src: url("/fonts/Formular-Light.woff2") format("woff2"), url("/fonts/Formular-Light.woff") format("woff");
-        font-weight: 300;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: "Formular";
-        src: url("/fonts/Formular-Regular.woff2") format("woff2"), url("/fonts/Formular-Regular.woff") format("woff");
-        font-weight: 400;
-        font-display: swap;
-    }
-
     html {
         font-size: 18px;
         background-color: ${props => props.theme.bgColor};