Font Subsetting: Find Missing Glyphs Before Shipping

A smaller web font is useful only if the page can still display its real content correctly. Test subset files against actual languages, punctuation, dynamic text, and fallback behavior. A stylesheet that declares a character range does not manufacture missing glyphs inside the font.

MDN's unicode-range documentation describes how the descriptor limits where a font face is used and can avoid fetching it when relevant characters are absent. Treat that as delivery behavior, distinct from physically creating a valid subset font file.

Build a content inventory before removing glyphs

Collect representative public text from headings, navigation, product names, prices, and user-generated fields. Add languages the application claims to support. A homepage snapshot rarely contains every character needed by account names, addresses, or later content updates.

Include punctuation that is easy to miss: curly quotation marks, different dashes, currency symbols, parentheses, and combining marks relevant to the language. A subset that handles alphabetic characters but replaces prices with empty boxes is not production-ready.

Review dynamic content separately. A published article may contain a name that never appeared during the build. Decide whether the design permits fallback for such content or needs a broader font resource. Do not promise complete language coverage based only on today's visible strings.

Keep the file and the CSS declaration aligned

Record which glyphs the generated file actually contains and which range the CSS advertises. These should be reviewed together. A range can be too narrow, causing an available glyph not to use the intended face, or too broad, selecting a file that lacks the requested shape.

Use the subset tool's supported inspection and validation process rather than inferring coverage from the filename. A file called japanese-subset.woff2 does not establish which characters are present or whether required shaping information survived the process.

Retain the original licensed source and reproducible subset configuration in the appropriate asset workflow. Check that the font licence permits the intended modification and distribution. A performance optimization does not remove the need to review those terms.

Test language behavior, not just isolated characters

Render complete words and sentences. Some writing systems rely on shaping, positioning, or combinations that cannot be evaluated by checking a grid of individual code points. Have a competent language reviewer inspect the result where the team lacks that expertise.

For Japanese pages, include common and less common names, kana, kanji, punctuation, and annotated text if used. Our ruby-text guide addresses the semantic reading annotations separately. Font coverage does not establish that a reading is correct.

Compare normal, bold, italic, and any other supported styles. A subset may exist for one weight while another request falls back or synthesizes a style. Confirm that emphasis remains distinguishable and does not change the meaning of a technical label.

Inspect the actual downloaded resources

Use browser developer tools to see which font files a page requests under different content. Test a page containing only the main language, then one with an additional supported script. Record whether the expected resource is requested and whether failures are visible.

Do not expect a character-range declaration to download only part of a font file. The resource remains a complete file when fetched. Meaningful transfer savings depend on how assets are segmented and which resources each page actually needs.

Check caching and deployment together. A new stylesheet pointing at a missing subset can produce a fallback that looks acceptable on one machine because the old font remains cached. Use a clean test context to expose that mismatch.

Treat fallback layout as part of the design

Block or fail the font request in a controlled test and inspect the page. Check line wrapping, clipped buttons, navigation width, and layout movement when the intended face later becomes available. A legible fallback is better than a blank interface waiting indefinitely for typography.

Use realistic narrow widths and increased text size. Long names and mixed scripts reveal layout assumptions that a short English placeholder hides. Avoid fixed-height text boxes that crop the alternate font's ascenders, descenders, or annotations.

If a particular logo or decorative title depends on a special face, keep the essential text meaning available elsewhere. Do not turn every product or service label into an image solely to avoid handling font coverage.

Add a repeatable regression fixture

Maintain a small multilingual test page with a documented reason for each sample. Include newly reported missing glyphs instead of only adding a one-off fix to production content. Verify the fixture after changing the source font, subset settings, or CSS mapping.

Our Text Diff can compare redacted content inventories between releases. It cannot inspect font binaries or prove shaping correctness, so pair that inventory check with the rendered-language review.

Conclusion

Optimize font delivery without shrinking the application's usable vocabulary. Align actual glyph coverage with CSS ranges, test full language samples and dynamic content, and make fallback behavior a supported part of the layout rather than an accidental rescue path.