CSS unicode-range

What is the CSS unicode-range Descriptor?

The CSS unicode-range descriptor, used inside @font-face rules, specifies the range of Unicode code points for which a font resource should be downloaded and applied. It is a critical performance optimization tool: when a browser encounters a @font-face declaration with a unicode-range descriptor, it only downloads the font file if the page actually contains characters that fall within the declared range. If the page has no such characters, the font is never fetched.

Without unicode-range, a page that includes multiple @font-face declarations for Latin, Greek, Cyrillic, and CJK would trigger all font downloads on page load, even if the page contains only Latin text.

Syntax

The unicode-range value accepts one or more comma-separated ranges in the following formats:

@font-face {
  font-family: "MyFont";
  src: url("myfont-latin.woff2") format("woff2");

  /* Single code point */
  unicode-range: U+0041;

  /* Range */
  unicode-range: U+0020-007F;

  /* Wildcard range (? matches any hex digit) */
  unicode-range: U+26??;

  /* Multiple ranges */
  unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F;
}

Google Fonts Usage

Google Fonts uses unicode-range to serve optimally subsetted fonts for each script, dramatically reducing file sizes. Instead of one monolithic font file, Google Fonts serves a CSS file that declares many small @font-face blocks, each covering a different Unicode range:

/* Google Fonts pattern (simplified) */
@font-face {
  font-family: "Noto Sans";
  src: url("noto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, ...;
}
@font-face {
  font-family: "Noto Sans";
  src: url("noto-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, ...;
}
@font-face {
  font-family: "Noto Sans";
  src: url("noto-greek.woff2") format("woff2");
  unicode-range: U+0370-03FF;
}

A page in English only downloads noto-latin.woff2. A page in Russian additionally downloads noto-cyrillic.woff2. The browser makes the decision autonomously by scanning the page's text content against each declared range.

Performance Optimization

unicode-range is especially powerful for CJK content. A full CJK font can be 5–20 MB, but a typical Chinese web page uses only a few hundred distinct characters. Combined with font subsetting tools, unicode-range enables:

1. Script subsetting: Separate font files per script (Latin, Cyrillic, CJK, Arabic)
2. Glyph subsetting: Font files containing only the characters actually used on the page
3. Progressive loading: Critical characters load first, rare characters load on demand

Quick Facts