{"id":259792,"date":"2017-09-08T06:42:01","date_gmt":"2017-09-08T13:42:01","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=259792"},"modified":"2020-09-01T08:56:55","modified_gmt":"2020-09-01T15:56:55","slug":"unicode-range","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/u\/unicode-range\/","title":{"rendered":"unicode-range"},"content":{"rendered":"\n

The unicode-range<\/code> property in CSS is used by the @font-face<\/code> to define the characters that are supported by the font face.<\/p>\n\n\n\n\n\n\n\n

@font-face {\n  font-family: 'MyWebFont'; \/* Define the custom font name *\/\n  src:  url('myfont.woff2') format('woff2'),\n        url('myfont.woff') format('woff'); \/* Define where the font can be downloaded *\/\n  unicode-range: U+00-FF; \/* Define the available characters *\/\n}<\/code><\/pre>\n\n\n\n
In other words, @font-face<\/code> will refer to the property and determine whether or not it should download and use the font based on whether the characters or range of characters match those in the HTML document.<\/p>\n\n\n\n
Font Face:<\/strong> Hey HTML, do any of the following characters match what is on the page?
HTML:<\/strong> Yep, a bunch of them do.
Font-Face:<\/strong> Great, here is a font file you should download to display those characters.<\/p><\/blockquote>\n\n\n\n
The important semantic distinction we should call out here is that unicode-range<\/code> determines what characters a font can be used for, rather than what characters a font is available to use. In other words, if we declare a unicode-range<\/code> on @font-face<\/code> and the characters that have loaded in an HTML document match that range, then the font will download and be put to use.<\/p>\n\n\n\n
You can imagine the performance benefits that open up with this property. For example, we can load a custom font only if it accommodates specific characters rather than always loading the font in all situations.<\/p>\n\n\n\n
There’s even a way to combine two @font-face<\/code> sets on the on the same font-face<\/code> property declaration, thanks to a handy trick<\/a> shared by Jake Archibald. The idea is that one @font-face<\/code> set overrides the other based on the matched unicode-range<\/code>, optimizing performance, or simply enhancing the typography on a page.<\/p>\n\n\n
Values<\/h3>\n\n\n
Any unicode character code or range is an acceptable unicode-range<\/code> value. You will notice that unicode points are preceded by a U+<\/code> followed by up to six characters that make up the character code. Points or ranges that do not follow this format are considered invalid and will cause the property to be ignored.<\/p>\n\n\n\n