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 value | U+0-10FFFF |
Media | all |
Computed value | as specified |
Canonical order | order 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 */
U+26
.U+0025-00FF
means include all characters in the range U+0025
to U+00FF
.'?'
character, so for example U+4??
means include all characters in the range U+400
to U+4FF
.<unicode-range>#
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; }
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of 'unicode-range' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes | Yes | 36 | 9 | Yes | Yes |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes | 36 | ? | Yes | Yes |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range