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
WP Rocket automatically optimizes Google 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
- 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.