This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

unicode-range

Summary

unicode-range allows you to set a specific range of characters to be downloaded from a font (embedded using @font-face) and made available for use on the current page.

Overview table

Initial value
U+0-10FFFF
Applies to
The @font-face block the property is included inside.
Inherited
No
Media
visual
Computed value
Same as the inputted value
Animatable
No
CSS Object Model Property
unicodeRange

Syntax

  • unicode-range: codepoint range
  • unicode-range: multiple value declarations
  • unicode-range: single codepoint
  • unicode-range: wildcard range

Values

single codepoint
A single unicode character codepoint, for example unicode-range: U+26.
codepoint range
A range of unicode codepoints. So for example, unicode-range: U+0025-00FF means “include all characters in the range U+0025 to U+00FF.”
wildcard range
You can specify wildcard characters using the “?” character, so for example unicode-range: U+4?? would mean “include all characters in the range U+400 to U+4FF.”
multiple value declarations
You can specify multiple single codepoints and/or codepoint groups, delimiting them using commas. For example, unicode-range: U+00-FF, U+980-9FF.

Examples

A single paragraph of HTML, including an ampersand. We have wrapped the ampersand in a <span> element because we want to use a different ampersand from a different font.

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

View live example

The CSS for the example above: 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 do this by wrapping the ampersand in a <span> and applying a different font just to that, but that is an extra element and ruleset!)

Be aware that Firefox does not yet support unicode-range properly, hence the reason for the second @font-face block. Here we are pointing to an obscure unicode codepoint that will likely never be used in our document, causing Firefox to stop applying the posh Eccentric font to the whole paragraph (definitely not what we want.) — just helvetica is a better fallback.

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

@font-face {
    /* Ampersand fallback font */
    font-family: 'Ampersand';
    src: local('helvetica');
    unicode-range: U+270C;
}

p {
    color: #faf;
    letter-spacing: -0.05em;
    font-size: 64px;
    font-family: Ampersand, helvetica, sans-serif;
}

Usage

 * As the examples above show, you can use unicode-range to create a custom @font-face that contains only the characters you need to be downloaded, saving on bandwidth.
  • You should always include a fallback font that is acceptable in case your unicode-range @font-face is not supported.
  • Support for unicode-range is currently limited; Chrome and Safari supports it well, Internet Explorer supports is as of version 9, Opera supports it, Firefox doesn’t support it.

Related specifications

CSS Fonts Module Level 3
Candidate Recommendation

See also

External resources