PageSpeed: Ensure Text Remains Visible During Webfont Load

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 ‘PageSpeed 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 > Ensure Text Remains Visible During Webfont Load’.

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.