Skip to main content
All website issues
Speed

Text disappears while custom fonts are loading

What this means for your business

Custom fonts are blocking your page from showing any text at all until they finish loading. Visitors see a blank space where words should be — which looks broken and drives them away.

How to fix it
Easy
15–30 minutes

  1. 1Add font-display: swap to every @font-face declaration in your CSS. This tells the browser to show text in a system font immediately, then swap to your custom font once it loads.
  2. 2Example: @font-face { font-family: "MyFont"; src: url("/font.woff2"); font-display: swap; }
  3. 3If you're using Google Fonts via a URL, add &display=swap to the end of the Google Fonts URL: https://fonts.googleapis.com/css2?family=Roboto&display=swap
  4. 4Consider self-hosting your fonts instead of loading them from Google — this removes an external network request and gives you full control over load order.

On WordPress

Most themes let you change the Google Fonts URL. Find it in Appearance → Customize → Typography and add &display=swap to the font URL. Alternatively, use the OMGF plugin to self-host Google Fonts automatically.

On Shopify

In your theme.liquid file, find the Google Fonts link tag and add &display=swap to the href URL. Or use a Shopify font picker that supports display=swap.

Does your site have this problem?

SiteSprout scans your site, tells you which issues you actually have in plain English, and keeps watch so nothing breaks silently.

Scan your site free