CSS unicode-range Descriptor
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.
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.
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.
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.
unicode-range descriptor can be much more useful than providing a single code point for some special effect.
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).
unicode-range descriptor has the following syntax:
This means that the value can be any number of unicode ranges made up of a
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
- Interval range
- This is represented as two hyphen-separated Unicode codepoints indicating the inclusive start and end codepoints of a range (for example
- Wildcard range
- This is defined by the set of codepoints implied when trailing
?characters are used to signify any hexadeximal digit (for example