unicode-range

Summary

The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.

The purpose of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page. For example, a site with many localizations could provide separate font resources for English, Greek and Japanese. For users viewing the English version of a page, the font resources for Greek and Japanese fonts wouldn't need to be downloaded, saving bandwidth.

Syntax

/* <unicode-range> values */
unicode-range: U+26;                 /* single codepoint */
unicode-range: U+0-7F;
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 */

/* Global values */
unicode-range: inherit;
unicode-range: initial;
unicode-range: unset;

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.

Formal syntax

<unicode-range>#

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 rule set.

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

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

Specifications

Browser compatibility

[1] From Firefox 4 through Firefox 34, the unicode-range descriptor in @font-face rules was parsed but the codepoint range ignored. From Firefox 35, unicode-range can be enabled on non-Linux platforms using the layout.css.unicode-range.enabled pref, which was on by default in nightly/developer builds. On Linux, this was possible from Firefox 41 onwards.

[2] Firefox and Chrome respect the unicode-range value when deciding which fonts to download (from Chrome 36, http://crbug.com/247920). Safari and Internet Explorer ignore the unicode-range value when deciding which fonts to download but respect it when deciding which font to use.