CSS unicode-range Property

The Unicode-range descriptor defines the specific range of the characters that are used with fonts specified by the @font-face property for the 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.

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

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

Example of the unicode-range property:

<!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 where the font can be downloaded */
      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 property example</h2>
    <div>Mary & Jack are friends.</div>
  </body>
</html>

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, that is using the '?' character to indicate any hexadecimal digit.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

v v 36.0+ v v

Practice Your Knowledge

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



Do you find this helpful?

Related articles