Open
Description
While testing a site with the @gantry 5 template via @google PageSpeed Insights, I found the following errors related to the fonts (Google fonts):
Ensure text remains visible during webfont load
Leverage the font-display
CSS feature to ensure text is user-visible while webfonts are loading. Learn more about font-display.
How to avoid showing invisible text
The font-display API indicates how a font is displayed when used inside a font-face
style. The following font-display
values will tell the browser to use a system font if the custom font is not ready:
swap
optional
fallback
CSS Example
@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-6H6MmBp0u-.woff2)
format('woff2');
font-display: swap;
}
Google Fonts Example
Add the &display=swap
/&display=optional
/&display=fallback
parameter to the end of your Google Fonts URL:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
Joomla 5.2, Gantry 5.5.19
Metadata
Metadata
Assignees
Labels
No labels