unicode-range property CSS Reference

Definition and Usage

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.

  • Initial valueU+0-10FFFF
  • Usagein a @font-face at-rule
  • Media visual
  • CSSOM property CSSFontFaceRule.unicodeRange


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 */


A single unicode character code point, for example U+26.
A range of unicode code points. So for example, U+0025-00FF means include all characters in the range U+0025 to U+00FF.
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.


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;


Desktop browsers

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support Not supported (Yes) 9.0 (Yes) (Yes)

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Basic support (Yes) Not supported 9.0 Not supported 10.0 (Yes)

Relative articles