Merge pull request #25 from AngeloStavrow/23-slow-font-loading

CSS bug in font loading (closes #23)

2 files changed, 37 insertions, 18 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 623552d..695b478 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [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
 - Broken link to compare v1.0.1 against v1.0 in this change log.
@@ -17,5 +22,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - The first public release of the indigo theme for Hugo, along with related project documentation (including this changelog).
 
+[Unreleased]: https://github.com/AngeloStavrow/indigo/compare/v1.0.2...HEAD
 [1.0.2]: https://github.com/AngeloStavrow/indigo/compare/v1.0.1...v1.0.2
 [1.0.1]: https://github.com/AngeloStavrow/indigo/compare/v1.0...v1.0.1
\ No newline at end of file
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;
 }