How to use font preload to improve core web vitals
- Step 1Identify the LCP-element font — Run Lighthouse. Find the LCP element (largest paint). Determine which font it uses. Often a hero headline or first paragraph — that's your preload target.
- Step 2Preload that one font — Add a single <link rel="preload"> for the LCP-element's font URL. Don't preload the body font, footer fonts, or anything below the fold — they compete for early bytes.
- Step 3Measure — Re-run Lighthouse. LCP should drop 100–500 ms depending on connection speed. If it doesn't, the preload isn't covering the actual LCP-element font — reinvestigate.
Frequently asked questions
Should I preload every above-the-fold font?+
No — preload only the LCP-element font. Preloading multiple fonts competes for early bandwidth. The LCP element is the one that matters; everything else can wait for the CSS-driven font requests.
What about variable fonts?+
Same approach — preload the variable WOFF2 if it's on the LCP path. Browsers cache the file once; every weight derived from it benefits from the preload.
Does preload help on cached visits?+
Slightly — preload reuses the disk cache the second time. The big win is on first-visit cold cache. Returning visitors hit cache regardless of preload.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.