I'm fine-tuning a theme using Lighthouse and one error that kept coming back was
"Ensure text remains visible during webfont load"
and then
"Specify `@font-display` when defining custom fonts in your theme"
if using local fonts, this is easy, just add font-display:swap to your css.
if using font libraries, this is different. For Google fonts, it can be easily achieved by adding "&display:swap" at the end of the URI in the theme's libraries.yml file
your-theme-external:
css:
base:
'https://fonts.googleapis.com/css?family=Montserrat&display:swap': { type: external, minified: true }
- Log in to post comments
Comments