From 7efeff6f76e65c57711f31d63ac191b35c64cedf Mon Sep 17 00:00:00 2001
From: Clay Miller <clay@smockle.com>
Date: Fri, 24 May 2019 22:39:06 -0400
Subject: [PATCH] Load fallback fonts with adjusted sizes.

---
 gatsby-config.js      |  8 ++++++++
 package-lock.json     | 14 ++++++++++++++
 package.json          |  1 +
 src/styles/global.css | 38 ++++++++++++++++++++++++++++++++++++--
 4 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 4c11f60f..9f7e3fa4 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -27,6 +27,14 @@ module.exports = {
     },
     "gatsby-transformer-sharp",
     "gatsby-plugin-sharp",
+    {
+      resolve: "gatsby-plugin-web-font-loader",
+      options: {
+        custom: {
+          families: ["Lato", "Crimson Pro S"]
+        }
+      }
+    },
     "gatsby-plugin-catch-links",
     {
       resolve: "gatsby-plugin-canonical-urls",
diff --git a/package-lock.json b/package-lock.json
index fd8c3288..b5b0b73f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9391,6 +9391,15 @@
         "babel-plugin-remove-graphql-queries": "^2.6.3"
       }
     },
+    "gatsby-plugin-web-font-loader": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-web-font-loader/-/gatsby-plugin-web-font-loader-1.0.4.tgz",
+      "integrity": "sha512-3c39bX9CcsYJQFhhmTyjuMJSqpld2rX+HsTOxP9k1PKFR4Rvo3lpzBW4d1tVpmUesR8BNL6u9eHT7/XksS1iog==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "webfontloader": "^1.6.28"
+      }
+    },
     "gatsby-react-router-scroll": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.0.7.tgz",
@@ -20022,6 +20031,11 @@
       "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.3.tgz",
       "integrity": "sha512-r8sAtNmgR0WKOKOxzuSgk09JsHlpKlB+uHi937qypOu3PZ17UxPrierFKDye/uNHjNTTEshu5PId8rojIPj/tA=="
     },
+    "webfontloader": {
+      "version": "1.6.28",
+      "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
+      "integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64="
+    },
     "webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
diff --git a/package.json b/package.json
index f82a7340..9d75f96f 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "gatsby-plugin-s3": "^0.2.5",
     "gatsby-plugin-sharp": "^2.1.0",
     "gatsby-plugin-typescript": "^2.0.14",
+    "gatsby-plugin-web-font-loader": "^1.0.4",
     "gatsby-remark-images": "^3.0.12",
     "gatsby-remark-vscode": "^1.0.3",
     "gatsby-source-filesystem": "^2.0.37",
diff --git a/src/styles/global.css b/src/styles/global.css
index 13a9dc9c..c27da9b8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,7 +1,7 @@
 /* Variables */
 :root {
-  --font-title: "Lato", sans-serif;
-  --font-body: "Crimson Pro S", serif;
+  --font-title: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  --font-body: "Crimson Pro S", "Georgia", serif;
   --font-code: "SF Mono", Menlo, monospace;
 }
 /* @media (prefers-color-scheme: no-preference), (prefers-color-scheme: light) { */
@@ -32,6 +32,7 @@
     url("fonts/lato-black.woff2") format("woff2");
   font-weight: 900;
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: "Crimson Pro S";
@@ -39,6 +40,7 @@
     url("fonts/crimsonpros-regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: "Crimson Pro S";
@@ -46,6 +48,7 @@
     url("fonts/crimsonpros-italic.woff2") format("woff2");
   font-weight: 400;
   font-style: italic;
+  font-display: swap;
 }
 @font-face {
   font-family: "Crimson Pro S";
@@ -53,6 +56,7 @@
     url("fonts/crimsonpros-bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
+  font-display: swap;
 }
 
 /* Base */
@@ -66,6 +70,28 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, p, blockquote, pre, a, ad
 }
 pre, code, kbd { font-family: var(--font-code); }
 pre { white-space: pre-wrap; }
+html:not(.wf-crimsonpros-n4-active) :not(li) > p,
+html:not(.wf-crimsonpros-n4-active) i,
+html:not(.wf-crimsonpros-n4-active) :not(li) > ul,
+html:not(.wf-crimsonpros-n4-active) :not(li) > ol,
+html:not(.wf-crimsonpros-n4-active) blockquote,
+html:not(.wf-crimsonpros-n4-active) table,
+html:not(.wf-crimsonpros-n4-active) figure {
+  font-size: 17px;
+  line-height: 1.75;
+  letter-spacing: 0.4px;
+}
+@media (min-width: 50em) {
+  html:not(.wf-crimsonpros-n4-active) :not(li) > p,
+  html:not(.wf-crimsonpros-n4-active) i,
+  html:not(.wf-crimsonpros-n4-active) :not(li) > ul,
+  html:not(.wf-crimsonpros-n4-active) :not(li) > ol,
+  html:not(.wf-crimsonpros-n4-active) blockquote,
+  html:not(.wf-crimsonpros-n4-active) table,
+  html:not(.wf-crimsonpros-n4-active) figure {
+    font-size: 19px;
+  }
+}
 html {
   font-family: var(--font-body);
   font-size: 20px;
@@ -114,6 +140,14 @@ main > :not(:only-child) > :last-child,
 }
 
 /* Font Size */
+html:not(.wf-lato-n4-active) h1,
+html:not(.wf-lato-n4-active) h2,
+html:not(.wf-lato-n4-active) h3,
+html:not(.wf-lato-n4-active) h4 {
+  font-weight: 700;
+  letter-spacing: -1px;
+  word-spacing: -0.5px;
+}
 h1, h2, h3, h4 {
   font-family: var(--font-title);
   line-height: 1.05;