CSS unicode-range Descriptor

The CSS unicode-range descriptor is used with the @font-face at-rule to the set of Unicode codepoints that may be supported by the font face for which it is declared.

The unicode-range descriptor accepts a comma-delimited list of Unicode range values. These values serve as a hint for user agents when deciding whether or not to download a font resource for a given text run. If the page doesn't use any character in the provided range, the font is not downloaded; if it uses at least one, the whole font family is downloaded.

The unicode-range descriptor allows you to specify that a font is only downloaded on pages that contain characters within a certain range. For example, if a page is available in multiple languages and requires different fonts depending on the language, you could use unicode-range to specify the Unicode ranges of each language. If a user visits the Japanese version for example, only the font that matches the Japanese code points will be downloaded.

Some Examples

Here's an example of providing a single code point. This results in the font being downloaded only if that code point is on the page.

This example uses the Unicode code point U+0024 (dollar sign).

Here's a working example to demonstrate how that single code point can be used:

If your browser supports the unicode-range descriptor you should see something like this:

That example sort of tricks the browser into displaying an effect. We limit the characters of the preferred font to only those characters we want to be displayed in that font (in this case the dollar sign — $). Then all other characters are displayed in the second choice font.

While we could have achieved the same effect by wrapping the dollar sign with span tags and adding a class, doing that would require modifying the HTML code. This example presents a way of doing it without modifying the HTML code.

However, the unicode-range descriptor can be much more useful than providing a single code point for some special effect.

Here's an example of specifying the Unicode code points for C0 Controls and Basic Latin and C1 Controls and Latin-1 Supplement:

But you can add more than just a single range too. You can add multiple code points and multiple ranges.

Here's an example that adds some more code points to that basic range:

So these ranges cover the basic latin letters and numbers plus a whole lot more. Anything outside of these ranges will be covered by the next font in the font stack (or the next, etc, as the case may be).

Official Syntax

The unicode-range descriptor has the following syntax:

This means that the value can be any number of unicode ranges made up of a U+ or u+ prefix followed by a codepoint range in one of the three forms listed below:

Single codepoint

This is a Unicode codepoint, represented as one to six hexadecimal digits (for example U+27C1).

Interval range

This is represented as two hyphen-separated Unicode codepoints indicating the inclusive start and end codepoints of a range (for example U+27C0-27EF).

Wildcard range

This is defined by the set of codepoints implied when trailing ? characters are used to signify any hexadeximal digit (for example U+27??)

Official Specifications

The unicode-range descriptor is defined in CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013).