Add FontFaceObserver to remove FOIT; Delete unused _fonts.css

kylegach · May 1, 2016 · 6e9d316 · 6e9d316
1 parent b911321
commit 6e9d316
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 18 deletions.
diff --git a/html.js b/html.js
@@ -31,6 +31,11 @@ class Root extends Component {
           <title>{title}</title>
           { favicons }
           { cssLink }
+          {/* TODO: How to bundle this script with the rest of them? It didn’t work
+                    in Safari when I did so.
+          */}
+          <script src="//npmcdn.com/fontfaceobserver@1.7.1/fontfaceobserver.js"></script>
+          <script dangerouslySetInnerHTML={{ __html: config.js.font }} />
         </head>
         <body>
           {/* TODO: How to move this script into the <head>? Doing so gives an

diff --git a/styles/modules/_fonts.css b/styles/modules/_fonts.css
diff --git a/styles/modules/_typography.css b/styles/modules/_typography.css
@@ -6,11 +6,13 @@ body {
   line-height: var(--lineHeight-4);
 }
 
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
-  font-family: var(--webFont);
-  font-weight: normal;
-  letter-spacing: calc(var(--letterSpacing-caps)/2);
+.webfonts-loaded {
+  & h1, & h2, & h3, & h4, & h5, & h6,
+  & .h1, & .h2, & .h3, & .h4, & .h5, & .h6 {
+    font-family: var(--webFont);
+    font-weight: normal;
+    letter-spacing: calc(var(--letterSpacing-caps)/2);
+  }
 }
 
 .fontFamily-inherit { font-family: inherit }

diff --git a/styles/modules/_variables.css b/styles/modules/_variables.css
@@ -8,7 +8,7 @@
 
 :root {
   /* Typography */
-  --webFont: 'league_spartanregular';
+  --webFont: 'leagueSpartan-bold';
 
   --lineHeight-1: 1;
   --lineHeight-2: 1.125;

diff --git a/styles/styles.css b/styles/styles.css
@@ -1,7 +1,6 @@
 @import '../node_modules/normalize.css/normalize.css';
 
 @import './modules/_variables.css';
-/*@import './modules/_fonts.css';*/
 @import './modules/_globals.css';
 @import './modules/_typography.css';
 @import './modules/_typeScale.css';
@@ -21,7 +20,7 @@
 @import './components/_stickyFooter.css';
 
 @font-face {
-	font-family: 'league_spartanregular';
+	font-family: 'leagueSpartan-bold';
 	src: url('./leaguespartan-bold-webfont.eot');
 	src: url('./leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
 		url('./leaguespartan-bold-webfont.woff2') format('woff2'),