hernik/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: ensure text remains visible during webfont load

Browse source 
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.
This commit is contained in:
jeffreytse 2021-06-28 17:31:53 +08:00
parent 351f320027
commit 5c4c473b88
1 changed files with 1 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
_sass/yat/_base.scss
View file

@ -17,6 +17,7 @@ body {
font-family: $base-font-family; font-family: $base-font-family;
font-weight: $base-font-weight; font-weight: $base-font-weight;
font-size: #{$base-font-size}; font-size: #{$base-font-size};
font-display: swap;
line-height: #{$base-line-height}; line-height: #{$base-line-height};
color: $text-color; color: $text-color;
background-color: $background-color; background-color: $background-color;