Make text readable while fonts load
Keep font files lean, provide a deliberate fallback, and preload only the font needed for the first view.
For your setup.
Choose your platform. A report may suggest one from source or delivery hints; confirm it matches the website you control.
This topic needs page-specific changes. Follow the general steps below; no platform snippet is assumed.
Why this matters
Web fonts add requests and bytes. Depending on the chosen display behavior, text may wait for a font or switch from a fallback after it arrives, which can affect perceived speed and move page content.
Keep only the variants you use
Inventory font families, weights, styles, and character sets in the rendered page. Remove unused variants and subset only when the needed languages and symbols are understood.
Choose a fallback and display policy
Set `font-display` deliberately so text has a useful fallback if the font is delayed. Compare fallback metrics and layout; `swap` can introduce movement when the custom face replaces it.
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}Preload sparingly
If one font file is definitely used in the first viewport and is discovered late, consider preloading that exact file with the correct type and cross-origin mode. Do not preload every weight or a font not used on the page.
<link rel="preload" href="/fonts/site-sans.woff2" as="font" type="font/woff2" crossorigin>Reserve stable text geometry
Compare line breaks, button widths, and heading heights between fallback and web fonts. Adjust fallback choice or font metric overrides where appropriate, then watch layout-shift measurements.
For your setup
Next.js
Next.js `next/font` can self-host and optimize configured fonts. Load only the weights and subsets your content needs, and confirm generated font requests in the production page.
WordPress
Check both theme fonts and plugin-injected font services. Prefer a small set of needed files and ensure local or remote font URLs use correct CORS behavior when preloaded.
Check your work
- Inspect font requests, transfer sizes, and whether a preload is reused.
- Disable cache or throttle the network to see fallback behavior.
- Check heading wrapping, button dimensions, and CLS before and after the font swap.
- Test the languages and special symbols your site actually publishes.