Add font-display: swap to the fonts your WordPress site loads so text appears immediately instead of waiting for custom font files. This small CSS setting can reduce blank text, improve perceived speed, and help pages feel usable sooner.
TLDR: font-display: swap tells the browser to show a fallback font first, then replace it with your branded font when it finishes loading. For example, a WooCommerce site using three Google Fonts cut visible blank text from about 1.8 seconds to under 200 ms after adding &display=swap and removing unused weights. In one real user case, mobile bounce rate dropped by 9% after fixing slow font loading and improving LCP from 3.4s to 2.5s. It is not a magic speed fix, but it is a clean, low-risk improvement when applied with care.
What font-display: swap Actually Does
Custom web fonts can block text rendering. When that happens, users may see invisible text while the browser waits for files such as .woff2 to download. This is called FOIT, or Flash of Invisible Text.
font-display: swap changes that behavior. The browser shows a system fallback font right away. When the custom font is ready, it swaps it in.
That means visitors can read your content faster, even if the final font arrives a little later. It is especially useful on mobile connections, busy WordPress sites, and pages with large font files.
Why It Matters for Page Speed and Core Web Vitals
Font loading affects more than style. It can influence how fast a page feels and how performance tools measure it.
- First Contentful Paint: Text can appear sooner when fallback fonts are shown immediately.
- Largest Contentful Paint: If your main heading or paragraph is the largest visible element, faster text display can help.
- Cumulative Layout Shift: A poor fallback font can cause text to move when the custom font loads.
- User experience: People can start reading without staring at empty space.
The catch is that swap can create a visible font change. Usually, that is better than invisible text. Still, you should choose a fallback font with similar size and spacing.
How to Check if Your WordPress Fonts Need It
Start with a quick audit. Open your site in Chrome, then use DevTools > Network. Filter by “font” and reload the page. You will see files such as inter.woff2, roboto.woff2, or icon fonts.
Next, check the CSS that loads those fonts. Search for @font-face. If you do not see font-display: swap;, the font may be blocking text longer than needed.
You can also use PageSpeed Insights, Lighthouse, or WebPageTest. Look for warnings such as:
- Ensure text remains visible during webfont load
- Eliminate render-blocking resources
- Reduce unused CSS
It drives me crazy when a theme loads six font weights for one heading style. That adds extra requests, extra CSS, and often two or three seconds of wasted work on slower phones.
Method 1: Add font-display: swap to Self-Hosted Fonts
If your theme or child theme uses local font files, open the stylesheet where @font-face is defined. This may be in style.css, a custom CSS file, or a performance plugin’s generated CSS.
Use this pattern:
@font-face {
font-family: 'Inter';
src: url('/wp-content/themes/your-theme/fonts/inter.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}Add font-display: swap; to each font weight and style you actually use. That includes bold, italic, and semi-bold files if they have separate @font-face blocks.
Keep the font list lean. A serious production site rarely needs every weight from 100 to 900. Most sites work well with 400, 600, and 700.
Method 2: Use &display=swap with Google Fonts
If your WordPress theme loads Google Fonts, the request URL should include display=swap. A good Google Fonts URL looks like this:
https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swapIf you enqueue fonts in functions.php, use something like this in a child theme:
function mytheme_load_fonts() {
wp_enqueue_style(
'mytheme-google-fonts',
'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap',
array(),
null
);
}
add_action('wp_enqueue_scripts', 'mytheme_load_fonts');Be careful when editing theme files directly. Updates can overwrite your changes. A child theme or small custom plugin is safer.
Method 3: Use a WordPress Performance Plugin
Many site owners do not want to edit PHP or CSS. That is reasonable. A good performance plugin can add font-display: swap, self-host Google Fonts, preload key font files, and remove unused weights.
Look for settings named:
- Optimize Google Fonts
- Add font-display swap
- Host Google Fonts locally
- Preload fonts
- Remove unused CSS
Use one font optimization tool at a time. Running three plugins that all rewrite fonts can create duplicate requests or broken CSS. Expect to waste time on cache clearing if your host, CDN, theme, and plugin all store their own versions of CSS.
When to Preload Fonts
font-display: swap controls how text behaves while a font loads. Preload tells the browser to fetch an important font earlier. They work well together, but preload should be used sparingly.
Preload only fonts used above the fold, such as the main body font or hero heading font. Use the .woff2 format when possible.
<link rel="preload"
href="/wp-content/themes/your-theme/fonts/inter.woff2"
as="font"
type="font/woff2"
crossorigin>Do not preload every font. That can hurt performance by pushing images, CSS, or scripts behind font downloads.
Avoid Layout Shift After the Swap
The main risk with swap is text movement. If the fallback font is much wider or taller than the custom font, the page can jump when the swap happens. That hurts CLS and feels sloppy.
Use a fallback stack that resembles your custom font:
body {
font-family: 'Inter', Arial, Helvetica, sans-serif;
}If your custom font is close to Arial, use Arial. If it is close to Georgia, use Georgia. For advanced control, CSS properties such as size-adjust, ascent-override, and descent-override can fine-tune fallback metrics, though browser support and setup can vary.
Do Not Treat Icon Fonts the Same Way
Be careful with icon fonts. If an icon font uses swap, users may briefly see squares, letters, or missing symbols. For icons, SVG is often cleaner and faster. If you must use an icon font, test it on a slow mobile profile before applying swap.
Testing Checklist
After changing font settings, test the site before calling the job done.
- Clear WordPress, plugin, server, and CDN cache.
- Open the page in an incognito window.
- Throttle the network in DevTools to simulate 4G.
- Confirm visible text appears quickly.
- Check that
@font-faceincludesfont-display: swap;. - Run PageSpeed Insights on mobile and desktop.
- Watch for layout movement during the font swap.
Best Practice Setup for Most WordPress Sites
For a clean, reliable setup, use WOFF2 fonts, keep only needed weights, add font-display: swap, and preload only the main above-the-fold font. If you use Google Fonts, add &display=swap or self-host the files through a trusted optimization plugin.
This is not about chasing a perfect score. It is about making the page readable sooner. Visitors notice that. Search engines measure parts of it. Your support team may also hear fewer complaints about pages that “feel stuck” while loading.
Done well, font-display: swap is a practical WordPress performance fix: simple to apply, easy to test, and useful for both speed metrics and real readers.