You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
While testing a site with the @gantry 5 template via @googlePageSpeed 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:
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
![изображение](https://private-user-images.githubusercontent.com/3662519/376383615-36dcd38b-f308-4d52-a37a-4ef79b7073cf.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5NDEzMzUsIm5iZiI6MTczODk0MTAzNSwicGF0aCI6Ii8zNjYyNTE5LzM3NjM4MzYxNS0zNmRjZDM4Yi1mMzA4LTRkNTItYTM3YS00ZWY3OWI3MDczY2YucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIwNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMDdUMTUxMDM1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTY2NWY5ZDJiMTY5OWY4OWVlOWU0M2IwY2U4ZTY2MWFkNjcxZjdhYjgyN2M3NWIyYjY5NDJjMTM0N2E0NzA4YiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.GINyvr_E4xJ3TA09fZlofAmNY3kHpaXz-w0I3OYxVeE)
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 followingfont-display
values will tell the browser to use a system font if the custom font is not ready:swap
optional
fallback
CSS Example
Google Fonts Example
Add the
&display=swap
/&display=optional
/&display=fallback
parameter to the end of your Google Fonts URL:Joomla 5.2, Gantry 5.5.19
The text was updated successfully, but these errors were encountered: