wordpress ensure text remains visible during webfont load

To achieve this, we need to add the font-display attribute to our statement. If we ran our imaginary WordPress blog through Google PageSpeed Insights, it would’ve given us the optimization suggestion to ensure text remains visible during webfont load. In our statement above, this attribute is missing. The attribute which ensures that text remains visible during webfont load is the font-display attribute. Let’s say we have an imaginery WordPress website, with a stylesheet that looks like this: This is the part Google PageSpeed Insights is pointing at. Themes do, too.Ī webfont is declared inside a stylesheet with a so-called statement. Plugins that perform actions in your site’s frontend often add stylesheets and webfonts to your pages and posts. Some of you might’ve even gotten all fancy (not!) and created yourself a plugin jungle! Whether you’re a WordPress blogger, developer or site configurator, chances are you’re using plugins.

What does this PageSpeed Insights optimization suggestion mean? That’s why I thought it’d be a good idea to zoom in on what it means to ensure that text remains visible during webfont load and how to fix it. The language Google chooses to describe its optimization suggestions (or anything, really) can be confusing.

When optimizing your WordPress site for Google PageSpeed Insights you will probably come across this optimization suggestion if you use Google Fonts or any other type of Webfonts. Ensure text remains visible during webfont load.

Wordpress ensure text remains visible during webfont load