Load your site on a phone with a weak signal and watch closely. The buttons appear, the images start filling in, and the space where your headline should be is empty for a moment. Then the text pops in, sometimes in a plain font first and then in your brand font, nudging the paragraph below it down a line. Older PageSpeed reports flagged this as “Ensure text remains visible during webfont load”; recent versions of the report cover the same problem under a font display heading.
The fix is one line of CSS, but choosing the right value and dealing with the jump it can cause takes a little more thought. Here is font-display swap explained from the beginning: why text disappears, what each option does, how to set it on WordPress, and how to keep the page from shifting when the font arrives.
Why text goes invisible while fonts load
When a page uses a web font, the browser has to download the font file before it can draw text in that font. While it waits, it has a choice: show the text in a fallback font that is already on the device, or hide the text until the real font arrives.
By default, most browsers hide it for a short time. If the font arrives during that window, the text appears in the right font straight away. If it does not, the browser gives up waiting and shows a fallback, then switches once the font finishes downloading. On a fast connection you never notice. On a slow one, visitors look at a page with gaps where the words should be, which is often called a flash of invisible text.
Invisible text is the worst of both worlds. The content has arrived, the visitor could be reading it, and the browser is holding it back for the sake of appearance. It can also delay First Contentful Paint, since text that is hidden has not been painted; that measure is explained in what First Contentful Paint tells you.
Font-display swap explained, value by value
The font-display descriptor tells the browser how to behave while a particular font is loading. It goes inside the rule that declares the font, and it has five values:
| Value | While the font loads | If the font is slow |
|---|---|---|
| auto | Browser decides, usually like block | Browser decides |
| block | Text hidden for a short period | Fallback shown, then swaps when the font arrives |
| swap | Fallback shown immediately | Swaps to the web font whenever it arrives |
| fallback | Text hidden very briefly, then fallback | Swaps only if the font arrives fairly soon; otherwise keeps the fallback |
| optional | Text hidden very briefly, then fallback | Uses the web font only if it is ready almost at once; otherwise keeps the fallback for this page view |
The exact timings are left partly to browsers, which is why the table describes them rather than giving numbers. The practical difference is between swap, which always ends up showing your font, and optional, which only shows it if it is available quickly, typically because it is already cached.
Swap or optional: which should you use?
Swap is the common choice, and it is the value the standard Google Fonts embed code asks for. Text is readable immediately, and the brand font always appears in the end. The cost is a visible change of font partway through loading, and possibly some movement if the two fonts take up different amounts of space.
Optional avoids that movement. On a first visit over a slow connection, the visitor may see the fallback for the whole page view, and the font is downloaded in the background for next time. On later visits the font comes from cache and appears straight away. It suits body text on sites where a stable page matters more than the exact typeface on a first visit.
A sensible split for many sites: optional or swap for body text, swap for headings and the logo if they use a distinctive font that is part of the brand.
Icon fonts are the exception
Icon fonts such as Font Awesome map icons onto letters or private character codes. With swap, the fallback font may show those characters as letters or empty boxes until the icon font loads. For icon fonts, block is usually the better behaviour, or better still, replace them with SVG icons that need no font at all.
How to set it on WordPress
Where you set font-display depends on where your fonts come from.
- Google Fonts loaded from Google. The font address accepts a display parameter, so adding
&display=swapto the end of the stylesheet address tells Google to include swap in every font rule. Many themes and builders already do this, or have a setting for it. - Fonts hosted on your own server. Add
font-display: swap;inside each font declaration in your CSS. Font plugins that self-host Google Fonts usually let you pick the value in their settings. If you are moving fonts to your server anyway, see hosting Google Fonts locally. - Theme and builder fonts. Check the typography or performance settings first. Some page builders have a font-display option in their settings that applies to the fonts they load.
- Optimisation plugins. Several caching and optimisation plugins can add swap to Google Fonts requests for you. Use one place, not three.
Fonts loaded by a third-party widget, such as a chat tool or an embedded form, follow that vendor’s choices. You usually cannot change them.
Stopping the jump when the font swaps in
If the fallback font is narrower or taller than your web font, text reflows when the swap happens. A heading that fitted on one line now takes two, and everything below moves. That movement counts towards Cumulative Layout Shift, which has its own causes and fixes covered in fixing layout shift on your pages.
Three ways to reduce it:
- Pick a closer fallback. In your font stack, list a system font that is similar in width and height to your web font, rather than a generic sans-serif. For a geometric sans, a similar geometric system font shifts less than a narrow one.
- Adjust the fallback’s size. CSS has descriptors such as
size-adjustand the ascent and descent overrides that let you scale a fallback font to match the web font’s proportions. Browser support for these varies, so treat them as a refinement, but where they work the swap becomes nearly invisible. - Load the font sooner. The earlier the font arrives, the less text is drawn in the fallback first. Preloading the one font file your main heading uses, and keeping the number of weights small, both help.
How to check it is working
- Open DevTools, go to the Network tab and set throttling to a slow mobile profile. Reload in a private window.
- Watch the headline. With swap, you should see readable text in the fallback immediately, then the change to your font.
- For a harder test, use the Network request blocking feature in DevTools to block font files entirely. The page should still be readable in the fallback.
- Run PageSpeed Insights again on mobile and confirm the font display warning has gone. If it remains, the report names the font files still missing a font-display value; trace each one to the theme, plugin or widget that loads it.
Fonts are a small slice of overall speed. For the order in which to tackle images, caching, scripts and the rest, our page speed guide is the place to start, and the group overview on CSS and JavaScript that holds up the first paint covers the files around your fonts.
Frequently asked questions
Does font-display swap make the font download faster?
No. It changes what visitors see while the font downloads, not how long the download takes. Text appears sooner because the browser uses a fallback straight away. To make the font itself arrive faster, load fewer files, serve woff2, consider self-hosting and preload the most important file.
Why does PageSpeed still flag fonts after I added swap?
Usually because another source still loads fonts without it. A page builder, form plugin, slider or third-party widget may load its own fonts or a second Google Fonts request. Look at the font files listed in the report, find which part of the site loads each one, and set the value there.
Will visitors notice the fallback font?
Some will see it for a moment on a slow connection, especially on a first visit. On fast connections or repeat visits, the web font is usually ready almost at once. A well-matched fallback makes the moment hard to spot, which is a better experience than staring at blank space.
Should I use font-display optional for my headings?
Only if you are comfortable with some first-time visitors seeing headings in the fallback font for the whole page view. If the heading font is a big part of your brand, swap is usually the better choice, combined with a closely matched fallback to keep movement small.
Invisible headings are usually one symptom among several. Our website speed optimisation begins with an audit that covers fonts along with images, scripts and caching, then gives you a prioritised list of fixes to approve before anything is changed.
Next in this series: Are Third-Party Scripts Slowing Your Website?
