CSS unicode-range Property - Usage, Examples

The unicode-range descriptor defines the specific range of characters that a font, specified by the @font-face at-rule, is allowed to provide. It is a descriptor, not a standalone property: it only has meaning inside an @font-face block, where it restricts which Unicode code points that particular font file is used for.

The browser uses this range as a download hint. If the page does not use any character in the range, the font file is not downloaded at all. If at least one character in the range appears on the page, the whole font file is downloaded. This makes unicode-range the foundation of font subsetting — serving a small font file per script (Latin, Cyrillic, Greek, etc.) and fetching only the ones the page actually needs. When @font-face is not supported, the fallback fonts in your font-family list are used instead.

Warning

Unicode points are preceded by a U+ followed by up to six characters that make up the character code. Points or ranges that do not have this format are considered invalid and will make the property be ignored.

There are many Unicode blocks to choose from. Basic Latin (U+0020-007F) covers the standard English letters, digits, and punctuation, and is the most common range for English-language sites.

Initial Value	U+0-10FFFF
Applies to	The @font-face block the property is included inside.
Inherited	Yes.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.unicodeRange = "U+0025-00FF";

Syntax

CSS unicode-range descriptor values

unicode-range: single codepoint | codepoint range | wildcard range | initial | inherit;

Example of the unicode-range descriptor:

CSS unicode-range descriptor code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'MyFont'; /* Define the custom font name */
        src: url('myfont.woff2') format('woff2'), 
             url('myfont.woff') format('woff'); /* Define the font source */
        unicode-range: U+00-FF; /* Define the available characters */
      }
      div {
        font-size: 3em;
        font-family: MyFont, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Unicode-range descriptor example</h2>
    <div>Mary & Jack are friends.</div>
  </body>
</html>

Try it Yourself »

Multiple @font-face rules for font subsetting

The primary use case for unicode-range is splitting a font into subsets to reduce download size. Each subset defines a specific character range:

@font-face {
  font-family: 'MyFont';
  src: url('myfont-latin.woff2') format('woff2');
  unicode-range: U+00-FF; /* Basic Latin */
}
@font-face {
  font-family: 'MyFont';
  src: url('myfont-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-04FF; /* Cyrillic */
}

The browser downloads only the subset that contains the characters used on the page. Note that every subset shares the same font-family name — that is what lets the browser treat them as one logical font split across several files.

Wildcard ranges

The ? wildcard stands for any single hexadecimal digit, which is a compact way to express a whole block. These three declarations are equivalent:

unicode-range: U+0000-00FF; /* explicit range */
unicode-range: U+00??;      /* wildcard: U+0000 to U+00FF */
unicode-range: U+0-FF;      /* leading zeros are optional */

You can also list several ranges, separated by commas:

/* Basic Latin + Latin-1 Supplement + the euro sign */
unicode-range: U+0000-00FF, U+0131, U+20AC;

Browser support

unicode-range is supported in all modern browsers (Chrome, Firefox, Safari, and Edge). Because it only affects which font file is downloaded, browsers that don't recognize it simply download the font as usual — so it degrades gracefully and is safe to use everywhere.

Values

Value	Description
single codepoint	A Unicode character code point which is represented in a form of one to six hexadecimal digits.
codepoint range	A range of Unicode code points which is represented in a form of two hyphen-separated Unicode code points. It specifies the start and end of a range.
wildcard range	A range of Unicode code points containing wildcard characters, using the `?` character to indicate any hexadecimal digit (e.g., `U+00??`).
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.

Practice

The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by

@font-family@font-face@font-weight