Skip to content

Commit

Permalink
feat: ensure text remains visible during webfont load
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
jeffreytse committed Jun 28, 2021
1 parent 351f320 commit 5c4c473
Showing 1 changed file with 1 addition and 0 deletions.
1 change: 1 addition & 0 deletions _sass/yat/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 5c4c473

Please sign in to comment.