unicode-range

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

The unicode-range CSS descriptor sets the specific range of characters to be downloaded from a font defined by @font-face and made available for use on the current page.

This descriptor can be used to make a custom @font-face contains only the characters that needs to be downloaded, saving on bandwidth.

Note: Web developer should always include a fallback font that is acceptable in case the unicode-range descriptor @font-face is not supported and the whole at-rule being invalid.

Syntax

Formal syntax: <urange>#
        where: <urange> = single_codepoint | codepoint_range | wildcard_range
unicode-range: U+26               /* single_codepoint */
unicode-range: U+0025-00FF        /* codepoint_range */
unicode-range: U+4??              /* wildcard_range */
unicode-range: U+0025-00FF, U+4?? /* multiple values can be separated by commas */

Values

single_codepoint
A single unicode character code point, for example U+26.
codepoint_range
A range of unicode code points. So for example, U+0025-00FF means include all characters in the range U+0025 to U+00FF.
wildcard_range
A range of unicode code points containing wildcard characters, that is using the '?' character, so for example U+4?? means include all characters in the range U+400 to U+4FF.

Examples

We create a simple HTML containing a single <div> element, including an ampersand, that we want to style with a different font. To make it obvious, we will use a sans-serif font, Helvetica, for the text, and a serif font, Times New Roman, for the ampersand.

<div>Me & You = Us</div>

In the CSS, you can see that we are in effect defining a completely separate @font-face that only includes a single character in it, meaning that we don't need to download the entire font to get what we want if it is a hosted font, and if it is a local font as in this example, we can at least cut down on extra markup and styles. We could also have done this by wrapping the ampersand in a <span> and applying a different font just to that, but that is an extra element and ruleset.

@font-face {
  font-family: 'Ampersand';
  src: local('Times New Roman');
  unicode-range: U+26;
}

div {
  font-size: 4em;
  font-family: Ampersand, Helvetica, sans-serif;	
}

Reference result

What the example should looks like if your browser supports it.

Live result

Specifications

Specification Status Comment
CSS Fonts Module Level 3 Candidate Recommendation Initial definition.

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support Not supported [1] (Yes) 9.0 (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Basic support (Yes) Not supported [1] 9.0 Not supported 10.0 (Yes)

[1] Since Gecko 2.0 (Firefox 4), using a unicode-range descriptor doesn't invalidate the @font-face at-rule. The descriptor is ignored and the at-rule is then applied to the whole range of code points.

See also

Attachments

File Size Date Attached by
Reference result
What the example should looks like if your browser supports it.
11320 bytes 2013-09-02 10:09:59 teoli

Document Tags and Contributors

Contributors to this page: kscarfone, teoli, chrisdavidmills
Last updated by: kscarfone,