summaryrefslogtreecommitdiff
path: root/_sass
diff options
context:
space:
mode:
authorjeffreytse <jeffreytse.mail@gmail.com>2021-06-28 17:31:53 +0800
committerjeffreytse <jeffreytse.mail@gmail.com>2021-06-28 17:31:53 +0800
commit5c4c473b88e0734e7221bbd06fe875a64b99b65d (patch)
treeacd7377b783c1b47c125a59d876dff5578b18a76 /_sass
parent351f3200273eb5f3c93467fa3d56586366384132 (diff)
feat: ensure text remains visible during webfont load
The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including `font-display: swap` in your font style. It's worth mentioning that not all major browsers support font-display: swap, so you may need to do a bit more work to fix the invisible text problem.
Diffstat (limited to '_sass')
-rw-r--r--_sass/yat/_base.scss1
1 files changed, 1 insertions, 0 deletions
diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss
index 224c287..1c60a9a 100644
--- a/_sass/yat/_base.scss
+++ b/_sass/yat/_base.scss
@@ -17,6 +17,7 @@ body {
font-family: $base-font-family;
font-weight: $base-font-weight;
font-size: #{$base-font-size};
+ font-display: swap;
line-height: #{$base-line-height};
color: $text-color;
background-color: $background-color;