Group
  • Performance

    Fix my web font loading

    Stop fonts from blocking render or causing text flashes: subset, preload, and self-host where it counts.

    • Improve quality
    • Ship faster
    • Beginner
    • General

Free Prompt

My site uses custom fonts and they're probably loaded naively. I want text to render fast without flashes of invisible or swapped text. Audit and fix: 1. Font inventory: which families, weights, and styles am I actually loading versus actually using? Remove unused weights and styles. Loading six weights to use two is common waste. 2. Font format: serve modern formats (woff2) and drop legacy formats unless I have a specific compatibility need. 3. Display behavior: ensure font-display is set (swap is the sane default for body text) so text renders in a fallback font immediately instead of staying invisible while fonts download. 4. Preload the one or two font files needed for above-the-fold text. Don't preload everything; preloading the wrong thing is worse than not preloading. 5. Self-hosting vs CDN: if I'm pulling fonts from a third-party host (Google Fonts, Adobe), consider self-hosting the subset I use to remove a render-blocking external connection. If my current setup is fine, tell me why and skip it. 6. Fallback metrics: pick fallback fonts with similar metrics (or use size-adjust overrides where supported) so the swap doesn't make the layout jump. Subset fonts to the character ranges I actually use if the files are large. When done, verify: no render-blocking font requests in the waterfall, no invisible-text period, and the before/after font payload size.

What This Does / How This Helps

This fixes web font loading: trimmed weights, woff2, font-display swap, preloading just the critical files, and fallback metrics that prevent layout jumps. Fonts are an invisible performance tax. Loaded wrong, they either block rendering entirely or leave users staring at blank text, and a swap with badly matched fallbacks makes the whole page jump seconds after it looked finished. AI-generated templates typically load full font families from a CDN with default settings, which is all three problems at once. The fixes are small, mechanical, and immediately visible in the load waterfall.

Want to skip doing this by hand?

Fortivibe audits your app for all of the areas these prompts cover (and more).

See What We Check

Related Prompts