AtoZ CSS Screencast: Unicode Range and @font-face

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:

[code language="css"]
@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');
}
[/code]

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

Continue reading %AtoZ CSS Screencast: Unicode Range and @font-face%

by Guy Routledge via SitePoint