How to Reduce Font Load in WordPress

Fonts are easy to overlook, but they’re often among the heaviest files on a page, and they block text from appearing until they arrive. A site with two font families in four weights each can easily download half a megabyte of fonts. Here’s how to measure it and cut it down, step by step.

Step 1: measure what you load

Open your site in Chrome, press F12, go to Network, filter by Font, and reload. You’ll see every font file, its size and where it comes from. Note:

• how many files there are (each weight and style is a separate file),
• their format (.woff2 is the smallest; .ttf and .woff are bigger),
• whether they come from your domain or another one (like Google Fonts).

PageSpeed Insights (Lighthouse) also flags fonts under “Ensure text remains visible during webfont load” and in the Largest Contentful Paint breakdown.

Step 2: use WOFF2 only

WOFF2 is compressed and supported by every modern browser. If your theme or builder still serves TTF or WOFF, convert them. For variable fonts, our free variable font converter turns TTF into WOFF2 in your browser, keeping every axis, usually about 60% smaller.

Step 3: load fewer weights

Every weight and style is another download. Most designs need two or three: regular, bold, maybe italic. Remove the 300, 500 and 800 weights nobody uses. It’s the easiest win.

Step 4: subset: only the characters you need

A full font contains Latin, Cyrillic, Greek, Vietnamese and more. An English site only needs Latin. A full font file can be around 80 KB, while its Latin subset can be 15–20 KB. For European languages, add Latin Extended.

Step 5: consider a variable font

A variable font packs every weight (and sometimes width or slant) into one file. If you use three or more weights of the same family, one variable WOFF2 is often smaller than three static files, and it gives designers every weight in between.

Step 6: host the fonts yourself

Loading fonts from Google Fonts or another service means an extra connection to another domain before the files can even start downloading, and in the EU it’s a privacy issue. Self-hosting removes both. See how to host Google Fonts locally in WordPress.

Step 7: control how fonts appear

Two settings decide what visitors see while fonts load:

• font-display: swap shows text immediately in a fallback font and swaps in your font when it arrives. Without it, text can stay invisible for a moment.
• Preload your one or two most important fonts (usually the body text and headings) so the browser fetches them right away instead of discovering them later in the CSS:

<link rel="preload" href="/wp-content/uploads/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>

Preload only the critical ones: preloading everything makes it slower, not faster.

Step 8: a good fallback

Pick fallback fonts that look similar in size, so the page doesn’t jump when the real font arrives, for example font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;.

Doing it all in one place

Font Hero handles these steps from one screen, for any theme or builder:

• Upload your own WOFF2 fonts, import Google Fonts to host them on your server, or connect Adobe Fonts.
• Pick only the subsets and weights you need, and switch off individual faces without deleting them.
• Set font-display and preload per font.
• Inline the font CSS to save a request.
• Build font stacks with the fallbacks you choose, available right in the Gutenberg font picker.
• Font Takeover imports fonts already added in a block theme, Bricks or Oxygen, so you can optimize them too.