unicode-range

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined using the @font-face at-rule 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.

Syntax

css

/* <unicode-range> values */
unicode-range: U+26; /* single code point */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* code point range */
unicode-range: U+4??; /* wildcard range */
unicode-range: U+0025-00FF, U+4??; /* multiple values */

Values

single code point: A single Unicode character code point, for example U+26.
code point 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.

Description

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.

Formal definition

Related at-rule	`@font-face`
Initial value	`U+0-10FFFF`
Computed value	as specified

Formal syntax

unicode-range = 
  <unicode-range-token>#

Examples

Using a different font for a single character

In this example, we create a single <div> element, with a text string that includes 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.

In the CSS 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.

HTML

html

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

CSS

css

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

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

Result

Specifications

Specification
CSS Fonts Module Level 4 # unicode-range-desc