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.
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. |