Show text before fonts are loaded. (#32)

Using `font-display: swap;` allows the browser to show the text
with another font before the webfonts are loaded. This makes the
loading time feel faster as you can already start reading instead
of looking at an empty website till the fonts are loaded.
See: https://fontsplugin.com/google-fonts-font-display-swap/

3 files changed, 15 insertions, 0 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 8d62158..c1a2cfc 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -104,6 +104,7 @@ button::-moz-focus-inner {
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
+  font-display: swap;
   src: url("fonts/fontawesome-webfont.eot?v=#4.0.3");
   src: url("fonts/fontawesome-webfont.eot?#iefix&v=#4.0.3") format("embedded-opentype"), url("fonts/fontawesome-webfont.woff?v=#4.0.3") format("woff"), url("fonts/fontawesome-webfont.ttf?v=#4.0.3") format("truetype"), url("fonts/fontawesome-webfont.svg#fontawesomeregular?v=#4.0.3") format("svg");
 }
diff --git a/static/webfonts/ptserif/main.css b/static/webfonts/ptserif/main.css
index b4be55f..cf31ab0 100644
--- a/static/webfonts/ptserif/main.css
+++ b/static/webfonts/ptserif/main.css
@@ -3,6 +3,7 @@
   font-family: 'PT Serif';
   font-style: normal;
   font-weight: 400;
+  font-display: swap;
   src: local('PT Serif'), local('PTSerif-Regular'), url(fonts/5hX15RUpPERmeybVlLQEWBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
   unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
 }
@@ -11,6 +12,7 @@
   font-family: 'PT Serif';
   font-style: normal;
   font-weight: 400;
+  font-display: swap;
   src: local('PT Serif'), local('PTSerif-Regular'), url(fonts/fU0HAfLiPHGlZhZpY6M7dBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
@@ -19,6 +21,7 @@
   font-family: 'PT Serif';
   font-style: normal;
   font-weight: 400;
+  font-display: swap;
   src: local('PT Serif'), local('PTSerif-Regular'), url(fonts/CPRt--GVMETgA6YEaoGitxTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
@@ -27,6 +30,7 @@
   font-family: 'PT Serif';
   font-style: normal;
   font-weight: 400;
+  font-display: swap;
   src: local('PT Serif'), local('PTSerif-Regular'), url(fonts/I-OtoJZa3TeyH6D9oli3ifesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
@@ -35,6 +39,7 @@
   font-family: 'PT Serif';
   font-style: normal;
   font-weight: 700;
+  font-display: swap;
   src: local('PT Serif Bold'), local('PTSerif-Bold'), url(fonts/QABk9IxT-LFTJ_dQzv7xpDTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
   unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
 }
@@ -43,6 +48,7 @@
   font-family: 'PT Serif';
   font-style: normal;
   font-weight: 700;
+  font-display: swap;
   src: local('PT Serif Bold'), local('PTSerif-Bold'), url(fonts/QABk9IxT-LFTJ_dQzv7xpDUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
@@ -51,6 +57,7 @@
   font-family: 'PT Serif';
   font-style: normal;
   font-weight: 700;
+  font-display: swap;
   src: local('PT Serif Bold'), local('PTSerif-Bold'), url(fonts/QABk9IxT-LFTJ_dQzv7xpCYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
@@ -59,6 +66,7 @@
   font-family: 'PT Serif';
   font-style: normal;
   font-weight: 700;
+  font-display: swap;
   src: local('PT Serif Bold'), local('PTSerif-Bold'), url(fonts/QABk9IxT-LFTJ_dQzv7xpI4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
@@ -67,6 +75,7 @@
   font-family: 'PT Serif';
   font-style: italic;
   font-weight: 400;
+  font-display: swap;
   src: local('PT Serif Italic'), local('PTSerif-Italic'), url(fonts/O_WhD9hODL16N4KLHLX7xSEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
   unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
 }
@@ -75,6 +84,7 @@
   font-family: 'PT Serif';
   font-style: italic;
   font-weight: 400;
+  font-display: swap;
   src: local('PT Serif Italic'), local('PTSerif-Italic'), url(fonts/3Nwg9VzlwLXPq3fNKwVRMCEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
@@ -83,6 +93,7 @@
   font-family: 'PT Serif';
   font-style: italic;
   font-weight: 400;
+  font-display: swap;
   src: local('PT Serif Italic'), local('PTSerif-Italic'), url(fonts/b31S45a_TNgaBApZhTgE6CEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
@@ -91,6 +102,7 @@
   font-family: 'PT Serif';
   font-style: italic;
   font-weight: 400;
+  font-display: swap;
   src: local('PT Serif Italic'), local('PTSerif-Italic'), url(fonts/03aPdn7fFF3H6ngCgAlQzPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
diff --git a/static/webfonts/source-code-pro/main.css b/static/webfonts/source-code-pro/main.css
index ac05f22..169d2fc 100644
--- a/static/webfonts/source-code-pro/main.css
+++ b/static/webfonts/source-code-pro/main.css
@@ -3,6 +3,7 @@
   font-family: 'Source Code Pro';
   font-style: normal;
   font-weight: 400;
+  font-display: swap;
   src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(fonts/mrl8jkM18OlOQN8JLgasDy2Q8seG17bfDXYR_jUsrzg.woff2) format('woff2');
   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
@@ -11,6 +12,7 @@
   font-family: 'Source Code Pro';
   font-style: normal;
   font-weight: 400;
+  font-display: swap;
   src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(fonts/mrl8jkM18OlOQN8JLgasD9V_2ngZ8dMf8fLgjYEouxg.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }