Skip to content

Web fonts loaded without font-display or preload hint

Your site loads fonts from Google Fonts without two important optimisations: a font-display:swap instruction (which tells the browser to show text immediately in a fallback font while the custom font loads) and a preload hint (which tells the browser to fetch the font early). Either or both are missing.

Why this matters

Without font-display:swap, text that uses a custom font can stay invisible until the font finishes downloading, so visitors may see a blank area for longer than necessary. That can add to perceived slowness and may affect metrics such as Largest Contentful Paint, which Google reports in Core Web Vitals.

How to fix it

If you load fonts via a Google Fonts URL, add &display=swap to the URL. For self-hosted fonts, add font-display: swap inside your @font-face CSS rules. Additionally, add a <link rel="preload"> tag in your page header for the most critical font file.

Turn website findings into an action plan

Create an account to start a Full Audit of your website, with supporting evidence and a prioritised action plan.

Start Full Audit