Ensure text remains visible during webfont load

When you use a webfont, like Google Fonts or Font Awesome, those fonts don't live on your visitor's computer - they have to be downloaded over the internet and that takes time.

For the second it might take to download the font, the text used by that font won't be visible. This is what Google wants you to fix. The way to do that is to specify a fallback system font that will display until the webfont is ready. 

By using the CSS declaration font-display:swap, this tells the browser to display the text immediately with a fallback font and then swap it for the requested font face as soon as it loads. 

This way your visitors will be able to see the content right away, improving the user experience and perceived loading time.

More information: https://web.dev/font-display/

How WP Rocket can help

Google Fonts

WP Rocket automatically optimizes Google Fonts

Other fonts

  • For other webfonts referred to within CSS files, enable either Minify or Combine CSS, and WP Rocket will automatically apply the required font-display: swap; to resolve this recommendation.
  • When Load CSS Asynchronously is enabled, font-display: swap; is applied to fonts found in the critical path CSS. 
  • When Remove Unused CSS is enabled, the font-display: swap; descriptor is applied to fonts found in the resulting Used CSS file.

These options are enabled but I still have this recommendation

This is usually because the fonts are being loaded onto your site in a way that WP Rocket won’t process:

  • In a 3rd party stylesheet loaded using @import
  • Loaded via JavaScript instead of in a stylesheet
  • In a stylesheet that is already minified and therefore not processed by WP Rocket. Enabling Combine CSS should resolve this.

I see a flash of unstyled text

This can happen when font-display:swap is used. Please see this article for further info.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.