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
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | 36.0+ | ✓ | ✓ |
Practice Your Knowledge
The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.