Ensure Text Remains Visible During Webfont Load in Shopify
December 22, 2021 | 5 min read
1. Identification Webfonts load
Tools like GT metrix, lighthouse, Page speed insights
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-face style.
2. What is @font-face?
A @font-face is a simple CSS rule through which you can apply a custom font to a text. It has extensions like woff2, woff, ttf, etc.
For example, a @font-face code will look like this-
You can easily fix this issue
Css Property:- font-display: swap;
Before
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'),
local('Pacifico-Regular'),
url(https:
//fonts.gstatic.
com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H
6MmBp0u-.woff2) format('woff2');
}
After
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'),
local('Pacifico-Regular'),
url(https:
//fonts.gstatic.
com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H 6MmBp0u-.
woff2)
format('woff2');
Font-display: swap;
}
3. Google Fonts
Google Fonts won’t add font-display: swap; rule to their font, but now they support a new query parameter to apply the font-display: swap; by adding the &display=swap parameter at the end of the google font file.
Example/div>
Before :-
<
link href="https:
//fonts.googleapis,
.com/css?family=Roboto:400,700"
rel="stylesheet"
>
After :-
<
link href="https:
//fonts.googleapis.
com/css?family=Roboto:400,
700&display=swap"
rel="stylesheet"
>