CSS unicode-range Property - Usage, Examples

The Unicode-range descriptor defines the specific range of characters that are used with fonts specified by the @font-face at-rule for use on the page. When @font-face is not supported, a fallback font should be included.

If the page does not use a character in the range, the font is not downloaded. If at least one character is used, the whole font is downloaded.

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 a lot of Unicode options to use. Basic Latin (0020—007F) is the most common range for English 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.

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