put font definitions into their own css file

gatsby-browser.js

@@ -1 +1,2 @@
+import "./src/styles/fonts.css"
 import "./src/styles/global.css"

src/styles/fonts.css

@@ -0,0 +1,83 @@
+@font-face {
+  font-family: "Space Mono";
+  font-style: bold;
+  font-weight: 700;
+  src: url("../../static/fonts/space-mono-v5-latin-700.eot"); /* IE9 Compat Modes */
+  src: local("Space Mono"), local("SpaceMono-Regular"),
+    url("../../static/fonts/space-mono-v5-latin-700.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../../static/fonts/space-mono-v5-latin-700.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("../../static/fonts/space-mono-v5-latin-700.woff") format("woff"),
+    /* Modern Browsers */ url("../../static/fonts/space-mono-v5-latin-700.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../../static/fonts/space-mono-v5-latin-700.svg#SpaceMono")
+      format("svg"); /* Legacy iOS */
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../../static/fonts/source-sans-pro-v13-latin-regular.eot"); /* IE9 Compat Modes */
+  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
+    url("../../static/fonts/source-sans-pro-v13-latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */
+      url("../../static/fonts/source-sans-pro-v13-latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("../../static/fonts/source-sans-pro-v13-latin-regular.woff")
+      format("woff"),
+    /* Modern Browsers */
+      url("../../static/fonts/source-sans-pro-v13-latin-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../../static/fonts/source-sans-pro-v13-latin-regular.svg#SourceSansPro")
+      format("svg"); /* Legacy iOS */
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400;
+  src: url("../../static/fonts/source-sans-pro-v13-latin-italic.eot"); /* IE9 Compat Modes */
+  src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"),
+    url("../../static/fonts/source-sans-pro-v13-latin-italic.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */
+      url("../../static/fonts/source-sans-pro-v13-latin-italic.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("../../static/fonts/source-sans-pro-v13-latin-italic.woff")
+      format("woff"),
+    /* Modern Browsers */
+      url("../../static/fonts/source-sans-pro-v13-latin-italic.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../../static/fonts/source-sans-pro-v13-latin-italic.svg#SourceSansPro")
+      format("svg"); /* Legacy iOS */
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 700;
+  src: url("../../static/fonts/source-sans-pro-v13-latin-700.eot"); /* IE9 Compat Modes */
+  src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"),
+    url("../../static/fonts/source-sans-pro-v13-latin-700.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("../../static/fonts/source-sans-pro-v13-latin-700.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("../../static/fonts/source-sans-pro-v13-latin-700.woff")
+      format("woff"),
+    /* Modern Browsers */
+      url("../../static/fonts/source-sans-pro-v13-latin-700.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("../../static/fonts/source-sans-pro-v13-latin-700.svg#SourceSansPro")
+      format("svg"); /* Legacy iOS */
+}

src/styles/global.css

@@ -1,53 +1,3 @@
-@font-face {
-  font-family: 'Space Mono';
-  font-style: bold;
-  font-weight: 700;
-  src: url('../../static/fonts/space-mono-v5-latin-700.eot'); /* IE9 Compat Modes */
-  src: local('Space Mono'), local('SpaceMono-Regular'),
-       url('../../static/fonts/space-mono-v5-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../../static/fonts/space-mono-v5-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../../static/fonts/space-mono-v5-latin-700.woff') format('woff'), /* Modern Browsers */
-       url('../../static/fonts/space-mono-v5-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../../static/fonts/space-mono-v5-latin-700.svg#SpaceMono') format('svg'); /* Legacy iOS */
-}
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../../static/fonts/source-sans-pro-v13-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
-       url('../../static/fonts/source-sans-pro-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../../static/fonts/source-sans-pro-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../../static/fonts/source-sans-pro-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('../../static/fonts/source-sans-pro-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../../static/fonts/source-sans-pro-v13-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  src: url('../../static/fonts/source-sans-pro-v13-latin-italic.eot'); /* IE9 Compat Modes */
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'),
-       url('../../static/fonts/source-sans-pro-v13-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../../static/fonts/source-sans-pro-v13-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../../static/fonts/source-sans-pro-v13-latin-italic.woff') format('woff'), /* Modern Browsers */
-       url('../../static/fonts/source-sans-pro-v13-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../../static/fonts/source-sans-pro-v13-latin-italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  src: url('../../static/fonts/source-sans-pro-v13-latin-700.eot'); /* IE9 Compat Modes */
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
-       url('../../static/fonts/source-sans-pro-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../../static/fonts/source-sans-pro-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../../static/fonts/source-sans-pro-v13-latin-700.woff') format('woff'), /* Modern Browsers */
-       url('../../static/fonts/source-sans-pro-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../../static/fonts/source-sans-pro-v13-latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */
-}
 html {
   background-color: #193360;
   color: #eeeeee;
@@ -78,7 +28,12 @@ a:visited {
   color: #ee66ff;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
-  font-family: 'Space Mono';
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Space Mono";
   font-weight: bold;
 }