xSpeed Cache
Get Plugin
Features Pricing Reviews FAQ
Documentation Blog Support Community Free vs Pro Compare
Get Plugin

Font Optimization

3 min read

Web fonts can hide your text while they download. xSpeed Cache’s font settings keep text visible and let you start critical fonts downloading sooner.

What this does

The Fonts panel has two settings:

  • Add font-display: swap appends display=swap to Google Fonts stylesheet URLs. The browser then shows your text right away in a fallback face while the web font loads, removing the blank-text gap (FOIT).
  • Preload Font URLs emits a <link rel="preload" as="font" crossorigin> tag in the page head for each font file you list. The browser starts downloading those fonts before the CSS finishes parsing.

These changes apply on frontend page renders only. Admin, cron, AJAX, and REST requests are left alone.

Why use it

  • Text appears immediately instead of waiting for a web font to download.
  • Above-the-fold fonts start downloading earlier, so they are ready sooner.
  • Both help perceived speed and can improve layout-shift and paint metrics.

How to set it up

  1. Go to the xSpeed Cache dashboard in your WordPress admin.
  2. Open the Fonts panel.
  3. Keep Add font-display: swap on for Google Fonts.
  4. Add the URLs of any above-the-fold fonts to Preload Font URLs.

Settings explained

SettingWhat it doesDefault
Add font-display: swapAppends display=swap to Google Fonts URLsOn (true)
Preload Font URLsPreloads listed font files in the headEmpty

Add font-display: swap. Appends display=swap to Google Fonts stylesheet URLs so text renders immediately in a fallback face while the web font loads. It only touches fonts.googleapis.com URLs, and it does nothing to a URL that already declares a display value (such as auto, block, swap, fallback, or optional). Default on.

Preload Font URLs. A list of absolute font URLs, one per line. Each becomes a <link rel="preload" as="font" crossorigin> tag in the head. Supported formats are woff2, woff, ttf, and otf. xSpeed Cache sets the correct type based on the file extension. Default empty.

Important: Only preload fonts that render above the fold. Preloading too many fonts makes the browser download them early and can slow down the rest of the page. A common choice is one or two of your most important body or heading fonts.

Best practices

  • Leave Add font-display: swap on if you use Google Fonts. It has no effect on non-Google stylesheets and respects any display value already set.
  • For Preload Font URLs, use full absolute URLs that point to the actual font files (for example, the woff2 file), not the stylesheet.
  • Preload only the faces visitors see first. Body text and main headings are the usual candidates.

Troubleshooting

  • display=swap is not added to my font. It only applies to Google Fonts (fonts.googleapis.com) URLs. Self-hosted fonts and other providers are not changed. Also, if the URL already has a display value, xSpeed Cache leaves it alone.
  • My preload does nothing. Check that the URL is absolute and points to a real font file with a woff2, woff, ttf, or otf extension. A stylesheet URL will not work here.
  • A font is downloaded but unused. You may have preloaded a font that does not appear above the fold. Remove URLs for fonts that are not needed early.

FAQ

Does this work with self-hosted fonts? The display=swap change targets Google Fonts URLs. For self-hosted fonts, use Preload Font URLs to preload the files you need early.

What if my Google Fonts URL already sets a display value? xSpeed Cache leaves it unchanged and respects the value your theme or plugin set.

What font formats can I preload? woff2, woff, ttf, and otf. xSpeed Cache picks the matching MIME type from the file extension.

  • Lazy Loading Images, Iframes, and Videos
  • Disabling Bloat