How to Preload Fonts in Webflow Without Breaking Them

Why it matters

Preload makes a font discoverable early. web.dev says it can be very effective for fonts declared in external stylesheets. It is meant to reduce the flash of unstyled text.

But preload takes browser resources away from other files. web.dev warns that misuse can harm performance by making unnecessary requests. It also says preload ignores unicode-range, so load only one font format with it.

Fonts can affect LCP. If your LCP element is text on a web font, its timing depends on that font loading.

How to check it

1. Find the LCP element. Run PageSpeed Insights. Check whether the largest element is text.
2. List your fonts. Open Site settings, then Fonts. Count families and weights. Webflow's health scan flags sites with more than 10 webfonts.
3. Find the fonts used above the fold. Usually this is the heading or hero font.
4. Check formats. For custom fonts, WOFF2 is recommended. Webflow says it can be up to 50% smaller than TTF or OTF.
5. Check the font display setting. Webflow recommends swap to avoid a flash of invisible text.
6. Check the head code. Open Site settings, then Custom code. Look for preload tags you added earlier.
7. Check font names. Webflow says a custom font that shares a name with a default Google Font, such as Montserrat or Roboto, may keep loading from Google's servers.
8. Look at network requests. In Chrome DevTools, open the Network panel, filter by Font and reload your published page.

How to fix it in Webflow

1. Cut fonts first. Remove the font from elements and classes in the Style manager. Then go to Site settings, Fonts, Custom fonts and delete it. Republish. Webflow says deleting it in settings alone does not remove it from the published CSS.
2. Use WOFF2 for custom fonts. Each file can be up to 4MB. Check the license before uploading.
3. Rename clashing fonts. Give custom fonts a unique name, so Webflow does not load them from Google.
4. Set font display to swap. Do this in each custom font's settings. Webflow says this applies to custom fonts only. For Google or Adobe fonts, you would download them and add them as custom fonts.
5. Choose what to preload. Preload only fonts needed immediately. web.dev preloads a bold header font and leaves the font for text below the fold alone.
6. Copy the font file URL. Find it in the Network panel on your published page. The tag needs the exact file you want preloaded.
7. Add the tag. Go to Site settings, then Custom code, then Head code. Add this line, with your URL:<link rel="preload" href="FONT-FILE-URL" as="font" type="font/woff2" crossorigin>Do not include html, head or body tags. If only one page uses the font, use Page settings, then Custom code, then Inside head tag. Custom code needs a Core, Growth, Agency or Freelancer Workspace, or a site with an active Site plan.
8. Publish and test on the live site. Webflow says custom code appears only on the published site, not in preview or the Designer.
9. Verify. Check the Network panel. Run PageSpeed Insights again. web.dev used the Lighthouse critical request chain to confirm a preload.
10. Undo if it does not help. Remove the tag if it adds requests without a clear gain.

Checklist

• Unused fonts and weights are deleted.
• Custom fonts are WOFF2.
• Custom font names do not clash with Google fonts.
• Font display is set to swap.
• Only above-the-fold fonts are preloaded.
• The preload URL is the exact font file.
• The tag has as="font", type="font/woff2" and crossorigin.
• Only one format is preloaded.
• The page was tested after publishing.
• The result was checked in PageSpeed Insights.

FAQ

Do I need the crossorigin attribute?

Yes. web.dev says a preloaded font without crossorigin is ignored by the browser.

Should I preload every font?

No. web.dev says to preload only fonts needed immediately. Extra preloads can add unnecessary requests.

Does preload remove the flash of text?

It is meant to reduce it. Webflow also recommends font display swap, which shows text right away instead of leaving it invisible.

Dealing with this on a live Webflow site? It is the kind of work I do in Speed. Send me your site and I will tell you what I would fix first.