AtoZ CSS Screencast: Unicode Range and @font-face

Share this article

AtoZ CSS Screencast: Unicode Range and @font-face

Key Takeaways

  • The @font-face at-rule in CSS allows the use of custom fonts in web design, boosting performance and improving typography. It is important to test these custom fonts across different operating systems and browsers to ensure they display correctly.
  • The unicode-range property in CSS can be used to limit the range of characters a custom font applies to. This can be particularly useful for adding special characters or symbols directly into your markup, or for using a special font for certain characters.
  • By using the unicode-range property, you can potentially improve the performance of your webpage by ensuring that only the necessary characters are downloaded and used, reducing the amount of data that needs to be loaded. It’s important to note, however, that not all browsers support this property, so fallback fonts should be provided in your CSS code.
Loading the player…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

Transcript

In the previous episode we looked at all sorts of properties for styling text.

In modern browsers, and in IE back to version 4, we can add custom fonts to enhance the design of our websites.

We can leverage various features of these custom fonts to help boost performance and improve our typography overall.

In this episode we’ll learn:

  • All about the @font-face at-rule
  • And how to control typography with font stacks and unicode-range

@font-face

The choice of typeface on the web used to be limited to a small handful of “web-safe” fonts like:

  • Arial
  • Comic Sans
  • Courier New
  • Georgia
  • Impact
  • Palatino
  • Tahoma
  • Times New Roman
  • Trebuchet
  • Verdana

Some of these are excellent typefaces and are really well suited to the web – Georgia as a serif font and Arial or Verdana are all great fonts. Comic Sans is certainly not one of the best…

But now we can now use all manner of custom fonts and have them display on all browsers by using @font-face.

While we can do this, it’s always worth testing any custom fonts on a range of operating systems and browsers to make sure they look as good as expected.

Do also bear in mind that font files can be quite large in file size so use them wisely to avoid performance issues.

The syntax for @font-face looks like this:

@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}

The font is given a name with the font-family property and then a series of different file types and formats are provided for each of the different browsers.

To save users downloading fonts that they already have on their system, it’s possible to specify a local() name of the font to search for.

In order to create all the correct formats of a font for different browsers, I use a fantastic online resource called Font Squirrel.

They have a web font generator and it works like a charm. The download they provide also contains all the code snippets for adding these custom fonts in your CSS which is pretty handy too!

unicode-range

Each of the characters in a font can be described by their unicode number which takes the form:

U+0041

The string “AtoZ CSS” could be expressed in unicode as follows:

A      t      o      Z      space  C      S      S
U+0041 U+0074 U+006F U+005A U+0020 U+0043 U+0053 U+0053

Every character including the space has a unique unicode number. There’s a whole range of special characters baked into the UTF-8 character set too which can be useful for adding shapes and symbols directly into your markup.

When adding custom fonts with @font-face we can limit the range of characters that they apply to which at first sounds a bit strange, but bear with me.

The italic ampersand of the typeface Baskerville is a thing of beauty and a lot of designers often like to use it even when not using the rest of the Baskerville font.

One way of using this special font just for ampersands would be to wrap them in a span tag and set a different font-family on it. But this is a bit cumbersome and can be done without any extra markup at all.

We can create a font containing just this character and add it to our font-stack as the first font in the list.

When the browser encounters characters that don’t appear in a font, it will scan down the stack until it does find a font that contains the required characters. We can use this behavior to add in the special ampersand when using any custom or web safe font.

First we create the @font-face at-rule to load the single character font. I’ll give it the font-family name “Ampersand” and use a local source for the font files to save on bandwidth.

I’ll specify the unicode-range as U+0026 for the single ampersand character. It’s possible to specify a whole range of characters, as the property name suggests, but just a single character is needed in this case.

@font-face {
  font-family: 'Ampersand';
  src: local('Baskerville-italic');
  unicode-range: U+0026;
}

In this sample HTML file, I’ve got a series of headings and paragraphs that both contain a couple of ampersands.

I’ll create two different font stacks, one for the headings and one for the body copy. In each case, the first font in the stack will be the custom “Ampersand” font.

For the headings, I’ll add Museo or Rockwell or serif as a fallback.

For the body, I’ll add Avenir, Arial or sans-serif as the fallback.

h1, h2 {
  font-family: 'Ampersand', 'Museo Slab', 'Rockwell', serif;
}
p {
  font-family: 'Ampersand', 'Avenir', 'Arial', sans-serif;
}

And that’s it. When the browser renders the text, the first font in the stack only contains an ampersand character so it will use the next one down the list (if found) to render the remaining characters.

The browser support for unicode-range is good. It’s supported in all modern browsers except Firefox and in IE back to version 9. As this is a purely visual enhancement, the browser support isn’t a huge worry for me – unsupported browsers will just get the first font in the stack that can be load successfully.

Frequently Asked Questions about CSS Unicode

What is the purpose of the unicode-range property in CSS?

The unicode-range property in CSS is used to specify the range of Unicode characters that will be used from a font. This property is typically used with the @font-face rule, which allows you to specify your own font for text on the webpage. By using unicode-range, you can control which characters in your font are used and when. This can be particularly useful when dealing with languages that have large character sets or when you want to use a special font for certain characters.

How do I specify a unicode range in CSS?

To specify a unicode range in CSS, you use the unicode-range property in your @font-face rule. The value of this property is a comma-separated list of Unicode ranges in hexadecimal format. For example, unicode-range: U+26 would specify the ampersand character. You can also specify a range of characters by using a hyphen. For example, unicode-range: U+60-7F would specify a range of characters from the grave accent to the lowercase ‘y’.

Can I use multiple unicode ranges in CSS?

Yes, you can specify multiple unicode ranges in CSS by separating them with a comma. For example, unicode-range: U+26, U+60-7F would specify the ampersand character and a range of characters from the grave accent to the lowercase ‘y’. This can be useful when you want to use different fonts for different sets of characters.

What happens if a character is not within the specified unicode range?

If a character is not within the specified unicode range, the browser will use the next available font that includes that character. If no other fonts are available, the browser will use a default system font. This ensures that all characters can be displayed, even if they are not included in your specified font.

Can I use the unicode-range property with any font?

The unicode-range property can be used with any font that is specified in an @font-face rule. However, the font must include the characters that you specify in the unicode range. If the font does not include these characters, the browser will use the next available font that does.

How can I find the Unicode value for a character?

You can find the Unicode value for a character by using a Unicode table or a Unicode converter tool. These resources will allow you to look up the Unicode value for any character, which you can then use in your CSS code.

Can I use the unicode-range property to specify special characters or symbols?

Yes, you can use the unicode-range property to specify special characters or symbols. This can be useful when you want to use a special font for these characters or when you want to ensure that these characters are displayed correctly.

What is the default unicode range in CSS?

The default unicode range in CSS is U+0-10FFFF, which includes all possible Unicode characters. If you do not specify a unicode range in your @font-face rule, this is the range that will be used.

Can I use the unicode-range property to improve the performance of my webpage?

Yes, by using the unicode-range property, you can potentially improve the performance of your webpage. By specifying a unicode range, you can ensure that only the necessary characters are downloaded and used, which can reduce the amount of data that needs to be loaded.

Are there any limitations or issues I should be aware of when using the unicode-range property?

One thing to be aware of when using the unicode-range property is that not all browsers support it. Therefore, it’s important to provide fallback fonts in your CSS code to ensure that your text can be displayed in all browsers. Additionally, the unicode-range property only works with fonts that include the specified characters. If your font does not include these characters, they will not be displayed.

Guy RoutledgeGuy Routledge
View Author

Front-end dev and teacher at The General Assembly London. A to Z CSS Screencaster, Founder of sapling.digital and Co-founder of The Food Rush.

aleczandergAtoZ CSSlearn-advanced-css
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week