Fix bug in font loading (#23)

1 files changed, 31 insertions, 18 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 2b3d846..13ba7fc 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,61 +1,74 @@
 @font-face{
     font-family: 'Fira Code';
     src: url('/fonts/FiraCode-Regular.eot');
-    src: url('/fonts/FiraCode-Regular.eot') format('embedded-opentype'),
+    src: url('/fonts/FiraCode-Regular.eot?#iefix') format('embedded-opentype'),
          url('/fonts/FiraCode-Regular.woff2') format('woff2'),
          url('/fonts/FiraCode-Regular.woff') format('woff'),
          url('/fonts/FiraCode-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
+    font-display: optional;
 }
 
 @font-face {
     font-family: 'Charter';
-    src: url('/fonts/charter_regular-webfont.eot') format('eot');
-    src: url('/fonts/charter_regular-webfont.woff') format('woff');
-    src: url('/fonts/charter_regular-webfont.ttf') format('truetype');
+    src: url('/fonts/charter_regular-webfont.eot');
+    src: url('/fonts/charter_regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/fonts/charter_regular-webfont.woff') format('woff'),
+         url('/fonts/charter_regular-webfont.ttf') format('truetype');
+    font-display: optional;
 }
 
 @font-face {
     font-family: 'Charter';
     src: url('/fonts/charter_bold-webfont.eot');
-    src: url('/fonts/charter_bold-webfont.woff') format('woff');
-    src: url('/fonts/charter_bold-webfont.ttf') format('truetype');
+    src: url('/fonts/charter_bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/fonts/charter_bold-webfont.woff') format('woff'),
+         url('/fonts/charter_bold-webfont.ttf') format('truetype');
     font-weight: bold;
+    font-display: optional;
 }
 
 @font-face {
     font-family: 'Charter';
     src: url('/fonts/charter_italic-webfont.eot');
-    src: url('/fonts/charter_italic-webfont.woff') format('woff');
-    src: url('/fonts/charter_italic-webfont.ttf') format('truetype');
+    src: url('/fonts/charter_italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/fonts/charter_italic-webfont.woff') format('woff'),
+         url('/fonts/charter_italic-webfont.ttf') format('truetype');
     font-style: italic;
+    font-display: optional;
 }
 
 @font-face {
     font-family: 'Charter';
     src: url('/fonts/charter_bold_italic-webfont.eot');
-    src: url('/fonts/charter_bold_italic-webfont.woff') format('woff');
-    src: url('/fonts/charter_bold_italic-webfont.ttf') format('truetype');
+    src: url('/fonts/charter_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/fonts/charter_bold_italic-webfont.woff') format('woff'),
+         url('/fonts/charter_bold_italic-webfont.ttf') format('truetype');
     font-style: italic;
     font-weight: bold;
+    font-display: optional;
 }
 
 @font-face {
     font-family: 'Fira Sans';
     src: url('/fonts/FiraSans-Book.eot');
-    src: url('/fonts/FiraSans-Book.woff2') format('woff2');
-    src: url('/fonts/FiraSans-Book.woff') format('woff');
-    src: url('/fonts/FiraSans-Book.ttf') format('truetype');
+    src: url('/fonts/FiraSans-Book.eot?#iefix') format('embedded-opentype'),
+         url('/fonts/FiraSans-Book.woff2') format('woff2'),
+         url('/fonts/FiraSans-Book.woff') format('woff'),
+         url('/fonts/FiraSans-Book.ttf') format('truetype');
+    font-display: optional;
 }
 
 @font-face {
     font-family: 'Fira Sans';
     src: url('/fonts/FiraSans-Bold.eot');
-    src: url('/fonts/FiraSans-Bold.woff2') format('woff2');
-    src: url('/fonts/FiraSans-Bold.woff') format('woff');
-    src: url('/fonts/FiraSans-Bold.ttf') format('truetype');
+    src: url('/fonts/FiraSans-Bold.eot?#iefix') format('embedded-opentype'),
+         url('/fonts/FiraSans-Bold.woff2') format('woff2'),
+         url('/fonts/FiraSans-Bold.woff') format('woff'),
+         url('/fonts/FiraSans-Bold.ttf') format('truetype');
     font-weight: bold;
+    font-display: optional;
 }
 
 * {
@@ -263,7 +276,7 @@ img.u-photo {
 }
 
 .card-subhead {
-    font-family: 'Fira Sans';
+    font-family: 'Fira Sans', Fallback, sans-serif;
     font-size: smaller;
     text-transform: uppercase;
 }
@@ -281,7 +294,7 @@ blockquote {
 code {
     background-color: #dee5e9;
     color: #00416a;
-    font-family: 'Fira Code';
+    font-family: 'Fira Code', Fallback, monospace;
     padding: 0.1em 0.2em 0.1em 0.2em;
 }