Speed matters. Late‑loading fonts push First Contentful Paint (FCP) and Largest Contentful Paint (LCP) outside the green zone. Follow this lean checklist to fetch only the fonts you need, early, and trim real seconds off your page loads.
Quick 5‑minute win – preload fonts with an optimisation plugin
The fastest path for 90 % of sites: copy‑paste the font URLs into your performance plugin and let it add the <link rel="preload"> tags for you.
| Plugin | Where to add paths | What to paste |
|---|---|---|
| WP Rocket | Preload → Fonts to preload | /wp-content/uploads/fonts/YourFont-regular.woff2 |
| Perfmatters | Assets → Preload | Tick Font, paste full URL, enable CrossOrigin |
| LiteSpeed Cache | Page Optimisation → Tuning → CSS | List each WOFF2 under Preload Critical Resources |
| Autoptimize | Extra → Preload key requests | Paste each URL, choose font type |
| FlyingPress | Speed → Fonts | Toggle Auto‑Preload for hands‑off discovery |
Preload Cheat Sheet (snapshot)
① Pick font weights (regular 400 & bold 700)
② Convert to WOFF2
③ Upload to /wp-content/uploads/fonts/
④ Paste paths in your plugin’s preload field
⑤ Clear caches & check DevTools waterfall
The Quick Fix for a Slow, Heavy Site
We optimise your site for speed, efficiency and sustainability. No rebuild. No delays. Just better performance and a lighter footprint.
Audit which fonts actually block rendering
If you don’t know what to preload, spend 3 minutes here.
- PageSpeed Insights → copy anything under Preload key requests.
- Lighthouse in Chrome DevTools → note font delays in Performance.
- DevTools → Network (filter Font) → watch for files that start after CSS.
Watch‑out: Ignore icon fonts or weights that appear below the fold; preloading them wastes bandwidth.Audit current font requests before you preload fonts in WordPress
Convert and self‑host critical fonts
Self‑hosting beats third‑party CDNs for speed and privacy.
- Download only the above‑the‑fold weights (e.g. regular 400, bold 700).
- Convert each file to WOFF2 with a free tool like Convertio.
- Upload the files to
/wp-content/uploads/fonts/(or a theme/fonts/folder). - Add
font-display: swap;so text remains visible during load.
If you’re still on Google Fonts, switch to self‑hosting first with our guide → Replace Google Fonts with system fonts.
Register the local fonts in your CSS stylesheet (or theme.json)
Tell the browser where to find each local file.
⚠️ IMPORTANT! – Replace YourFont with your actual font family (e.g., "Inter"), and swap every your-font-*.woff2 filename with your own WOFF2 files.
@font-face {
font-family: "YourFont";
src: url("/wp-content/uploads/fonts/your-font-regular.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}Using a block theme? Add the family in theme.json under styles.typography.fontFamily so the editor recognises it.
Paste this into the Code Snippets plugin or just below the opening <?php in your child‑theme functions.php, no extra PHP tags needed.
function lw_preload_fonts() {
echo '<link rel="preload"
href="' . get_stylesheet_directory_uri() . '/fonts/your-font-regular.woff2"
as="font" type="font/woff2" crossorigin>';
echo '<link rel="preload"
href="' . get_stylesheet_directory_uri() . '/fonts/your-font-bold.woff2"
as="font" type="font/woff2" crossorigin>';
}
add_action( 'wp_head', 'lw_preload_fonts', 1 );⚠️ Never edit header.php directly, theme updates will wipe your edits.
Clear caches and verify early font loading
Purge plugin, server and CDN caches, then reload with DevTools open. The font rows should show (preloaded) and fire within the first 50 ms. Double‑check the waterfall in GTmetrix.
Measure performance gains and remove unused preloads
Run Lighthouse or PageSpeed Insights again. Aim for lower FCP/LCP and zero Unused preload flags. Want another quick win? Lazy load images in WordPress pairs perfectly with font preloading.
Wrap‑up
Preload just two lean WOFF2 files and you can shave 200 ms, or more, off Largest Contentful Paint, often tipping Core Web Vitals into the green. Rerun Lighthouse and enjoy the instant speed bump.
