Our volunteers haven't translated this article into Türkçe yet. Join us and help get the job done!
You can also read the article in English (US).

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.

Related at-rule@font-face
Initial valueU+0-10FFFF
Computed valueas specified
Canonical orderorder of appearance in the formal grammar of the values


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


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



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 only this character will be styled with this font. 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;	

Reference result

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

Live result


Specification Status Comment
CSS Fonts Module Level 3
The definition of 'unicode-range' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
unicode-rangeChrome Full support 1Edge Full support 12Firefox Full support 36IE Full support 9Opera Full support YesSafari Full support 3.2WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 36Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support 1.0


Full support  
Full support

See Also

Document Tags and Contributors

Last updated by: estelle,