← All posts

Font Optimization in WordPress: Subsets, Swap and Preload

performance

Self-hosted fonts often weigh far more than they need to, because they carry characters for languages your site never uses. In this video we pick the right character subset, convert the same font three ways at Transfonter.org, and load it in Oxygen Builder with Swiss Knife's Font Manager. We also set up font-display: swap and preload. The result: a font file that drops from 2.1 MB to 24 KB, text that shows while the font loads, and a preload on only the font that needs it.

Find your language subset

Subsetting keeps only the characters your content needs, and it is the biggest lever you have on font file size. Before you convert anything, check which subset covers your language.

  1. Open Google Fonts and switch the preview from Sentence to Alphabet.
  2. Filter the fonts by the Latin subset and type some sample text in the Type something field. Western European characters such as German or Swedish letters (ß, ö, ä, ü) are covered by basic Latin.
  3. For Eastern European languages, switch to Latin Extended. In the video, Serbian and Croatian characters (Č, Ć, Đ, Š, Ž) only render with Latin Extended. Fonts that lack them show empty boxes in their place.

If basic Latin covers your language, that's the subset you want. If it doesn't, use Latin Extended.

Convert the font with Transfonter

Most people convert fonts with the default settings, and the default is the expensive mistake. At transfonter.org the Subsets dropdown is set to All, which keeps every character the font has.

We used Dela Gothic One because it supports many scripts. The source file is about 5.5 MB.

  1. Download the font from Google Fonts.
  2. On Transfonter, click Add fonts and select the font file.
  3. Under Formats, tick WOFF and WOFF2.
  4. Set Subsets to your language: Latin or Latin Extended. The dropdown also has Arabic, Cyrillic, Greek, Vietnamese and other options.
  5. Leave Font display on swap.
  6. Click Convert, then Download.

We converted the same font three times and compared the WOFF2 files:

| Subset | WOFF2 size | |---|---| | All | 2.1 MB | | Latin | 24 KB | | Latin Extended | 31 KB |

The "All" version covers Latin, Latin Extended, Arabic, Chinese, Japanese and every other language the font supports. Picking a subset strips the characters you don't need, so the browser downloads a small fraction of the file.

Compare subsets with a custom font in Oxygen

It's easier to trust the numbers once you see what each subset actually drops. We set up a test page in Oxygen with text blocks grouped by character set: numbers and special characters, Latin, Latin Extended, Cyrillic, Cyrillic Extended, Greek and Greek Extended. Every block uses a custom font called Title.

The custom font comes from Swiss Knife's Font Manager (Swiss Knife → Font Manager in the WordPress admin):

  1. Click Add Font Family and name it (here Title, plus a second one called Body).
  2. Click Add Font Face, then set Font Weight (400).
  3. Upload the file in Upload WOFF2 File. For this test we only uploaded the WOFF2 file.
  4. Click Save, then reload the Oxygen builder.
  5. In Oxygen, select the text and choose Title under Font Family.

With the Latin file, only basic Latin characters render in Dela Gothic One and everything else falls back to the browser default. With Latin Extended, the Č/Ć/Đ/Š/Ž line renders too, but Cyrillic and Greek still fall back. Only the All file covers every block. So choose the subset your content actually uses.

Font display: swap

On a slow connection, the browser can hold back text until the font file arrives. With font-display: swap, visitors can read the text right away and the custom font appears once it has loaded.

In the Font Manager, every font face has a Font Display dropdown, set to Swap here. To see it in action:

  1. Open the page in an incognito window.
  2. Open DevTools, go to the Network tab and set throttling to Fast 3G.
  3. Reload the page.

First you'll see the page in the browser's default font. Once the font files finish downloading, the browser replaces it with the custom font. The swap setting is what makes that replacement possible. Font display has other values too. Swap is the one we use in this demo.

Preload only the critical font

Preloading tells the browser to fetch a font before anything else. That's useful for the font people see first and costly if you do it for every font.

In the test, the heading uses the Title font (Dela Gothic One) and the body uses Roboto. On the throttled reload, the heading showed the biggest visible switch and the body font barely changed. So we preload only the title font:

  1. In Font Manager, open the Title font face (Edit style).
  2. Tick Preload and click Save.
  3. Reload the page and open Elements in DevTools. Inside <head> there is now a <link rel="preload" as="font"> pointing to the Latin WOFF2 file.

We preload one font because a preloaded font is fetched before the rest of the CSS and HTML. Preload several fonts and the browser has to download all of them before the rest of the page, which slows the site down. You're always balancing user experience against performance. Preload the font whose swap people would notice most, usually the heading font, and let the others swap.

Who is this for

  • Oxygen Builder users self-hosting fonts who want smaller font files without extra tools on the site.
  • Developers building sites in one or two languages who are shipping full-character-set fonts by default.
  • Anyone tuning page speed who wants to know which fonts are worth preloading and which should just swap.
  • Sites in Eastern European languages that need to check that Latin Extended covers their characters before going live.

FAQ

Which font subset should I choose? Use the smallest one that covers your content. Basic Latin handles Western European languages such as German and Swedish. Serbian, Croatian and other Eastern European languages need Latin Extended. Test it in Google Fonts with the Alphabet preview before you convert.

How much smaller does subsetting make a font? In our test with Dela Gothic One, the WOFF2 file was 2.1 MB with "All", 24 KB with Latin, and 31 KB with Latin Extended.

What happens if my subset is missing characters? The browser falls back to its default font for those characters. In the Oxygen test, Cyrillic and Greek text showed in the default font when we used the Latin or Latin Extended file.

What does font-display: swap do? The browser shows text in a fallback font right away and switches to your custom font once the file has downloaded, so text stays visible on slow connections.

Should I preload all my fonts? No. Preloaded fonts load before the rest of the CSS and HTML, so preloading several delays the whole page. Preload only the most visible font, such as the title font, using the Preload checkbox in Swiss Knife's Font Manager.

Get Swiss Knife → dplugins.com

Related posts