WordPress Google Fonts vs Font Hero: File Size Compared

WordPress 6.5 lets block themes install Google Fonts without a plugin, so it's fair to ask whether you still need a font manager. We installed the same four Roboto weights with the core Manage Fonts panel and with Font Hero, then compared the files each one saved to disk. Core saved each weight at 63–64 KB. Font Hero, set to Latin only, saved each at 16 KB. For a site with several weights, that difference adds up fast.

WordPress 6.5's native Google Fonts

Before 6.5, a block theme needed a plugin or manual @font-face work to use Google Fonts. Core now downloads the font files to your server and serves them locally, and for many sites that's enough. What the Site Editor doesn't show you is how heavy those files are, and that's what this comparison looks at.

The test site runs WordPress 6.5.2 with Font Hero 2.1.0 installed.

Installing Roboto via core WordPress

To get a fair comparison, we picked the weights a typical site uses: light, regular, bold and extra bold. We used Roboto because it covers many languages, so it's a good example of how big an unsubsetted font can get.

1. Open Appearance → Editor, go to Styles and click Typography.
2. Click the Manage fonts icon next to Fonts.
3. Open the Install Fonts tab. WordPress asks for permission first (Connect to Google Fonts). Click Allow access to Google Fonts.
4. Search for Roboto and tick Roboto 300 normal, Roboto 400 normal, Roboto 700 normal and Roboto 900 normal. We skipped the italic variants. If you only need italic now and then, you can often get by with the browser slanting the regular font.
5. Click Install.

Roboto then shows up in the Library tab with 4 variants. The only thing you can do there is tick or untick variants. There are no subset, loading or display settings.

Core result: file size per weight

Frameworks and unused CSS get a lot of attention, with people arguing over 10, 20 or 50 KB, but fonts often cost more and nobody checks them. We opened wp-content/uploads/fonts to see what core had saved.

The files are WOFF2, which is good: it compresses better than older formats. But each weight came out at 63–64 KB, and the files have hashed names like KFOlCnqEu92Fr1MmSU5fBh05IsDqlA.woff2. That's four weights for one family. Add a second family for headings and maybe a third for subtitles, and you can easily reach half a megabyte of fonts.

Installing the same font in Font Hero

Font Hero adds the same Google Fonts library, but with the settings that control file size and loading.

1. Go to Appearance → Font Hero and click + Add Google Fonts.
2. Search the Google Fonts list for Roboto.
3. Tick the same weights: 300, 400, 700 and 900, all normal.

Subsetting to Latin-only

An English-language site doesn't need Cyrillic, Greek or Vietnamese glyphs, but an unsubsetted font makes every visitor download them. Subsetting drops what you don't use.

1. Under Character subset ("Optimise fonts to have only character that your language needs"), tick only latin. The other options are cyrillic, cyrillic-ext, greek, greek-ext, latin-ext and vietnamese.
2. Set Font Display to Swap.
3. Leave Replace Font Family Name empty unless you want a custom name.
4. Click Save.

Why Swap matters: on a slow 3G or mobile connection, visitors should see your text right away instead of waiting for the font to download. If someone just needs your phone number, they shouldn't be staring at a blank page.

Font Hero result: 16KB vs 63–64KB

The Font Hero screen now lists Roboto with each weight marked Normal, Latin, Swap. On disk, Font Hero stores the files in wp-content/uploads/font-hero/google-fonts/roboto/ next to a generated font-hero.css. The file names tell you what's inside:

• roboto-light-normal-latin.woff2: 16 KB
• roboto-regular-normal-latin.woff2: 16 KB
• roboto-bold-normal-latin.woff2: 16 KB
• roboto-heavy-normal-latin.woff2: 16 KB

That's 16 KB per weight compared with 63–64 KB from core for the same font. The saving comes from removing the character sets you don't need (Chinese, Vietnamese and other special characters). In the video, Marko also mentions preload, which lets you choose which fonts load right away.

Font-family priority ordering

Once you have more than one family installed, the order decides which one comes first in the editor. To show this, we added a second family (ABeeZee). Each family in Font Hero has a drag handle, so you can drag families up or down to reorder them. That order sets their priority when you pick a font family in Gutenberg.

The main point still stands: core's font files are not optimized. On high-traffic sites, font weight has a real performance cost and you should plan for it.

Adobe Fonts support

Many designers work with Adobe Fonts because they can group fonts per project and import the whole set. Gutenberg's font library doesn't support Adobe Fonts, so we left them out of this comparison. Font Hero does support them through the + Add Typekit Fonts button, next to + Add Google Fonts and + Add custom font.

Who is this for

• Block theme builders on WordPress 6.5+ who wonder whether the core font library is good enough. It works, but it doesn't subset.
• Developers of high-traffic or mobile-heavy sites who want smaller font files and text that shows before the fonts finish loading.
• Sites in a single language that can drop unused character sets and ship one quarter of the font weight.
• Designers using Adobe Fonts, which core Gutenberg can't import.

FAQ

Does WordPress 6.5 support Google Fonts without a plugin? Yes. In the Site Editor, go to Styles → Typography → Manage fonts → Install Fonts, allow access to Google Fonts, and pick your variants. WordPress downloads the files and hosts them locally.

How big are the Google Fonts files WordPress core installs? In our test, each Roboto weight was a WOFF2 file of 63–64 KB, stored in wp-content/uploads/fonts. Core doesn't give you a way to subset them.

How does Font Hero make font files smaller? It subsets the font to the character sets you choose. With only latin selected, each Roboto weight came out at 16 KB.

Does Font Hero support font-display swap? Yes. Each font has a Font Display setting, and we used Swap so text shows in a fallback font while Roboto loads.

Can I use Adobe Fonts in a block theme? Not through Gutenberg's built-in font library. Font Hero adds them with + Add Typekit Fonts.

Get Font Hero → dplugins.com