PageSpeed: Font Display

Pages with fonts that may flash or become invisible during page load, which can be annoying to users and reduce the visual appearance of page load speed.

How to Analyse in the SEO Spider

To populate this filter the PageSpeed Insights API must be connected via ‘Config > API Access > PSI’.

View URLs with this issue in the ‘PageSpeed’ tab and filter and use the lower ‘Lighthouse Details’ tab to click on the issue on the left-hand side, and see details of the fonts on the right-hand side.

Bulk export the pages and fonts via ‘Reports > PageSpeed > Font Display’.

What Triggers This Issue

This issue is triggered when pages experience a “flash of unstyled text” (FOUT) or “flash of invisible text” (FOIT) with fonts during page load.

How To Fix

Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.

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.