December 22, 2021 | 5 min read
Ensure text remains visible during webfont load in Shopify
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” >