From 27d1950183431c54ac6e616400571f753b00128f Mon Sep 17 00:00:00 2001 From: Martin Date: Wed, 27 Nov 2019 16:57:13 +0100 Subject: 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/ --- static/css/style.css | 1 + static/webfonts/ptserif/main.css | 12 ++++++++++++ static/webfonts/source-code-pro/main.css | 2 ++ 3 files changed, 15 insertions(+) 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; } -- cgit v1.2.3