Go to all posts

Using the unicode-range property to our advantage

Resources

Font Drop for parsing font files

MDN Documentation for unicode-range

Python fonttools

A property of the @font-face declaration that I don't see used often enough is unicode-range.

Jump to heading What is it?

Unicode is how characters are identified. Each character you see online has a matching "unicode". For example, in this post you'll see U+000 which equals to be the first character in the font-files unicode range.

To see this you'll need to either parse the file with tools like Python's fonttools. We will be using the site FontDrop to get a peek at what is going on in our font files.

Jump to heading How to use the unicode-range property

Keep in mind that the upper limit I am using in examples is 0FF, your font file may be different. Here's some examples:

@font-face {
/* Use all the characters from the 000 to 0FF */
unicode-range: U+000-0FF;
/* Only use the third character */
unicode-range: U+002;
/* Use the first 10 characters, and the last */
unicode-range: U+000-009, U+0FF;
}

Check out the documentation, if you need a deeper look.