Fixed font loading issues with Chrome

Related: https://bugs.chromium.org/p/chromium/issues/detail?id=602968
jorilallo · Jan 2, 2017 · 709d194 · 709d194
1 parent c1a1018
commit 709d194
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 62 deletions.
diff --git a/components/Layout.js b/components/Layout.js
@@ -24,7 +24,9 @@ injectGlobal`
 body, html, #__next {
   margin: 0;
   height: 100%;
+}
 
+#__next {
   font-family: 'Source Code Pro', 'Courier', monospace;
   font-size: 16px;
   font-weight: 400;
@@ -34,15 +36,6 @@ input, textarea, select, button {
   font-family: 'Source Code Pro', 'Courier', monospace;
 }
 
-.fonts-loaded body,
-.fonts-loaded #__next,
-.fonts-loaded input,
-.fonts-loaded textarea,
-.fonts-loaded select,
-.fonts-loaded button {
-  font-family: 'Source Code Pro', 'Courier', monospace;
-}
-
 * {
   box-sizing: border-box;
 }
@@ -59,56 +52,4 @@ p {
 #__next {
   display: flex;
 }
-
-@font-face {
-  font-family: "Source Code Pro";
-  src: url(/static/fonts/SourceCodePro-Regular.woff);
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Source Code Pro";
-  src: url(/static/fonts/SourceCodePro-Medium.woff);
-  font-weight: 500;
-}
-
-@font-face {
-  font-family: "Source Code Pro";
-  src: url(/static/fonts/SourceCodePro-SemiBold.woff);
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: "Source Code Pro";
-  src: url(/static/fonts/SourceCodePro-Bold.woff);
-  font-weight: 700;
-}
-
-@font-face {
-  font-family: "Source Code Pro";
-  src: url(/static/fonts/SourceCodePro-Italic.woff);
-  font-weight: 400;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "Source Code Pro";
-  src: url(/static/fonts/SourceCodePro-MediumItalic.woff);
-  font-weight: 500;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "Source Code Pro";
-  src: url(/static/fonts/SourceCodePro-SemiBoldItalic.woff);
-  font-weight: 600;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "Source Code Pro";
-  src: url(/static/fonts/SourceCodePro-BoldItalic.woff);
-  font-weight: 700;
-  font-style: italic;
-}
 `;
diff --git a/pages/_document.js b/pages/_document.js
@@ -19,7 +19,8 @@ export default class MyDocument extends Document {
             name="description"
             content="Browse, filter and manipulate your JSON inside the browser"
           />
-          <link rel="icon" type="image/png" href="static/favicon.png" />
+          <link rel="icon" type="image/png" href="/static/favicon.png" />
+          <link rel="stylesheet" type="text/css" href="/static/css/fonts.css" />
 
           <meta name="viewport" content="width=device-width, initial-scale=1" />
 

diff --git a/static/css/fonts.css b/static/css/fonts.css
@@ -0,0 +1,51 @@
+@font-face {
+  font-family: "Source Code Pro";
+  src: url(/static/fonts/SourceCodePro-Regular.woff);
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url(/static/fonts/SourceCodePro-Medium.woff);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url(/static/fonts/SourceCodePro-SemiBold.woff);
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url(/static/fonts/SourceCodePro-Bold.woff);
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url(/static/fonts/SourceCodePro-Italic.woff);
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url(/static/fonts/SourceCodePro-MediumItalic.woff);
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url(/static/fonts/SourceCodePro-SemiBoldItalic.woff);
+  font-weight: 600;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url(/static/fonts/SourceCodePro-BoldItalic.woff);
+  font-weight: 700;
+  font-style: italic;
+}