2 files changed, 32 insertions, 18 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9303bc4..695b478 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 ### Fixed
 - The 404.html page now properly links back to the homepage, thanks to @sauerj!
+- Custom fonts are now loaded correctly, hopefully speeding up rendering ([#23](https://github.com/AngeloStavrow/indigo/issues/23))
 
 ## [1.0.2]
 ### Fixed
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;
 }