Font display
The Font display insight flags pages where custom web‑fonts hide text while they load, causing a Flash of Invisible Text (FOIT) and hurting Core Web Vitals.
Consider setting font-display to swap or optional to ensure text is consistently visible. swap can be further optimized to mitigate layout shifts with font metric overrides
Understanding Font display
The texts from your website will be hidden to your site's visitors if they are using a web font that is not installed in their computer (like Google Fonts, Font Awesome or Adobe Font which can be loaded with the @font-face declaration) until the browser finishes downloading the correct font to be used. This causes display issues and has a negative impact on the site’s performance.
To prevent this from happening, the font‑display: swap attribute can be used, to tell the browser to show a fallback font first (the nearest system font), and then replace it with the custom font when it’s ready. This helps to eliminate FOIT and reduces Cumulative Layout Shift (CLS), which in turn contributes to improve the site’s performance.
How to improve Font display with WP Rocket
- Remove Unused CSS (Optimize CSS delivery > Remove unused CSS) - applies the
font-display: swapattribute to the fonts in the resulting Used CSS. - Optimize Google Fonts - this feature comes enabled by default and adds the
font-display: swapattribute to the Google Fonts included in the combined request. - Preload fonts - tells the browser to fetch critical fonts early, shortening the swap delay.
- Minify CSS files - files with
.minin their filenames that also contain any@font-facerule will be optimized. WP Rocket will process any non-minified CSS rules and will apply thefont-display: swapattribute to the fonts.