Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

CSS unicode-range: request only the font subset a page uses

Last updated: 5 Oct 20265 min read
tutorial
BeginnerBy AITrove Editorial

The unicode-range descriptor limits which characters an @font-face resource can supply. A browser can avoid fetching a face when the page uses none of its declared characters. The descriptor does not split one large font file into smaller files; the files must already be subsetted.

When to use it

A case registry has Latin interface copy and a separate Greek-language archive. Ship two licensed WOFF2 subsets under one family, each with a range matching glyphs actually present in its file. Keep a system fallback for missing glyphs, punctuation, and a failed font request. The sample paths are deployment placeholders; replace them with real, audited files before using the rule. Inspect the network panel on a Latin-only route, then on a Greek route, and check which resources load. Also test a mixed-language record, accented names, search results inserted after initial render, and font loading under a slow connection. A broad range that claims a glyph absent from the file can send the browser through poor fallback. Language tags remain necessary for pronunciation and text processing; font selection alone does not establish language. Do not infer that a page needs a script merely from its locale setting, because the actual text may contain names or citations from several scripts.

css
@font-face { font-family: "Registry Sans"; src: url("/assets/registry-latin.woff2") format("woff2"); unicode-range: U+0000-024F; font-display: swap; }
@font-face { font-family: "Registry Sans"; src: url("/assets/registry-greek.woff2") format("woff2"); unicode-range: U+0370-03FF; font-display: swap; }
.registry-copy { font-family: "Registry Sans", system-ui, sans-serif; }

Cost and verification

The possible win is fewer transferred font bytes on pages using one script. The cost is additional files, range maintenance, and the risk of gaps when editorial copy changes. A glyph used from a range can trigger a download of that entire face, so splitting a tiny file into dozens of requests may be worse. Measure transfer size and layout shift with representative routes rather than assuming every subset improves speed. Verify the license permits the files and any subsetting operation. Match the declared font weight and style to the files; fake bold or italic is a separate typographic failure. If the fonts are unavailable, the system fallback must preserve readable line lengths and controls.

Common Mistakes

  • Do not expect unicode-range to split a monolithic font automatically.
  • Do not claim code points that the referenced file cannot render.
  • Do not omit a usable fallback or the real font license.

Connected lessons

css
reference
web
Storage details