Use font-display: block

Takes up to 2s before url is fetched, before which text flashes in a different font
GraphQLGuide · Jun 4, 2021 · 4de4ca7 · 4de4ca7
1 parent fc8000e
commit 4de4ca7
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/packages/gatsby-theme-apollo-core/package-lock.json b/packages/gatsby-theme-apollo-core/package-lock.json
diff --git a/packages/gatsby-theme-apollo-core/package.json b/packages/gatsby-theme-apollo-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-guide-core",
-  "version": "3.0.27",
+  "version": "3.0.32",
   "main": "index.js",
   "description": "A theme for The GraphQL Guide (a fork of gatsby-theme-apollo-core)",
   "license": "MIT",
@@ -20,6 +20,7 @@
     "gatsby-plugin-svgr": "^2.0.1",
     "less": "^3.10.1",
     "lodash": "^4.17.14",
+    "normalize.css": "^8.0.1",
     "polished": "^2.3.3",
     "prop-types": "^15.6.2",
     "react-helmet": "^5.2.0",

diff --git a/packages/gatsby-theme-apollo-core/src/styles.less b/packages/gatsby-theme-apollo-core/src/styles.less
@@ -1,12 +1,50 @@
-@import (inline) '~@apollo/space-kit/reset.css';
+@import (inline) "~normalize.css/normalize.css";
 
+@font-face {
+    font-family: 'Source Code Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'),
+        url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevT.ttf)
+        format('truetype');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
+        url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7g.ttf)
+        format('truetype');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
+        url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdr.ttf)
+        format('truetype');
+}
+
 html {
+    box-sizing: border-box;
     font-size: 100%;
     line-height: 1.45;
     overflow-y: auto;
 }
 
+*, *:before, *:after {
+    box-sizing: inherit;
+}
+
+pre, code {
+    font-family: 'Source Code Pro', monospace;
+}
+
 body {
+    font-family: 'Source Sans Pro', sans-serif;
     color: @color-text2;
 }