diff --git a/components/Layout.js b/components/Layout.js
index c8cea16..e826e71 100644
--- 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
index 0399a07..aa83c31 100644
--- 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"
/>
-
+
+
diff --git a/static/css/fonts.css b/static/css/fonts.css
new file mode 100644
index 0000000..6574e91
--- /dev/null
+++ 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;
+}