Web Font Performance Checklist: 10 Checks Before You Launch

Fonts are often among the larger files on a page, and they affect two things visitors notice: how soon text appears, and whether it jumps when the font arrives. This checklist covers what to check before launch, in roughly the order you would fix things. Each item links to a FontPivot tool or a longer guide.

Work through it once per font family. Most sites only need a few changes.

1. Serve WOFF2

WOFF2 is the web format with the best compression; web.dev’s Best practices for fonts reports that it compresses about 30% better than WOFF, and every current browser supports it. TTF and OTF files are not compressed at all.

Check: in your browser’s developer tools, filter the Network panel by “Font”. Every file should be WOFF2.

Fix: convert with TTF to WOFF2, OTF to WOFF2, or WOFF to WOFF2. WOFF2, WOFF, TTF, or OTF? explains why one format is enough.

2. Load only the styles you use

Every weight and style is usually its own file. Four weights plus italics can add up to eight downloads for one family.

Check: list the font-weight and font-style values your CSS really uses, and compare them with your @font-face rules. A file that is declared but never used costs nothing, because browsers only download faces the page needs, but a weight used once in a footer still costs a full file.

Fix: drop weights you barely use, or let the nearest available weight stand in. If you use many weights, a variable font may be smaller than several static files; compare the sizes. Variable fonts on the web explains how to load one.

3. Trim variable fonts to the range you use

A variable font contains every style between its extremes. If your site uses weights 400 to 700 of a font that goes from 100 to 900, the rest of the range is dead weight.

Fix: use the variable font instancer to narrow an axis to the range you use, or fix it at one value to get a static font. It shows the real file size as you go and writes matching @font-face CSS.

4. Remove characters you never show

Many fonts include alphabets for dozens of languages. A site in English and Spanish does not need Cyrillic, Greek, or Vietnamese.

Check: open the font in the font viewer. Its character count and Language support panel show how much the file covers.

Fix: subset it with the font subsetter, which keeps ligatures and kerning and writes the matching unicode-range. How to subset a web font explains how to choose the characters, and why unicode-range alone does not make a file smaller.

5. Choose font-display on purpose

Without font-display, many browsers hide text for up to 3 seconds while the font loads.

Check: search your CSS for every @font-face rule, including ones written by a font service, and look for font-display.

Fix: use swap for most text and consider optional where stability matters most. Choosing a font-display value walks through each value.

6. Preload only the font the first screen needs

Fonts are discovered late, after the CSS. A preload hint starts the most important download early, but preloading everything competes with your CSS and main image.

Check: look for <link rel="preload" … as="font"> tags in your HTML. There should be one or two, each with crossorigin, and each URL should match an @font-face src exactly.

Fix: How to preload web fonts has the markup and the cases where you should not preload. If you download a web font kit from the font converter, its snippet tabs include a preload tag for your files.

7. Match the fallback font to reduce layout shift

With font-display: swap, text first appears in a fallback font. If that fallback is wider or taller than your font, the page moves when the font arrives, which counts toward Cumulative Layout Shift.

Fix: use the font fallback generator to calculate size-adjust and metric overrides for system fonts such as Arial and Roboto, and to see the shift with and without them. The converter’s web font kit can include the same fallback CSS. How to reduce layout shift from web fonts explains the method and browser support: released versions of Safari apply only size-adjust.

8. Cache font files for a long time

Font files rarely change, so a repeat visitor should never download them twice.

Check: in the Network panel, click a font request and read the Cache-Control response header. Also check that Content-Type is font/woff2.

Fix: with file names that change when the file changes, use Cache-Control: public, max-age=31536000, immutable. How to self-host a custom font has examples for common hosts, and covers the CORS header needed when fonts live on another domain.

9. Make sure the processed font still works

Every step above changes the file you ship. Check that nothing important was lost.

Check: open the final WOFF2 files in the font viewer. Paste real content into the text tester and look for missing characters; check the OpenType features panel for features your CSS uses, such as tabular figures or small caps; and confirm the name and weight of each file.

Guides: How to check a font file before launch and OpenType features in CSS.

10. Measure before and after

Changes that look good on paper do not always help. Measure on a throttled connection with the cache disabled.

• Lab: run Lighthouse or PageSpeed Insights. The Ensure text remains visible during webfont load audit flags missing font-display, and the CLS figure shows layout shift.
• Waterfall: in the Network panel, check when each font starts and finishes, and how large it is.
• Real visitors: the web-vitals library reports CLS and other metrics from real page views.

Keep the changes that make text appear sooner or move less, and undo the rest.

Copyable checklist

Web font performance checklist
[ ] 1. All font files are WOFF2
[ ] 2. Only the weights and styles the CSS uses are loaded
[ ] 3. Variable fonts trimmed to the axis ranges in use
[ ] 4. Fonts subset to the characters the site shows
[ ] 5. Every @font-face rule sets font-display
[ ] 6. One or two critical fonts preloaded, with crossorigin
[ ] 7. Fallback fonts adjusted with size-adjust and overrides
[ ] 8. Long Cache-Control and font/woff2 Content-Type
[ ] 9. Final files checked: characters, features, names, weights
[ ] 10. Measured before and after (Lighthouse, Network, field data)

Further reading

• web.dev: Best practices for fonts
• web.dev: Reduce web font size
• MDN: Web fonts