In my last blog entry I briefly mentioned CSS3 when talking about the confusion surrounding HTML5. In this post, I’m going to talk about one of the new features of CSS3 and one which will possibly be noticed most by the non-web developer.

Allow me to introduce @font-face.

What does @font-face do?

It allows a web developer to embed a font within a web page and display it to the user. So instead of the bog standard fonts that are normally found on websites, you can now see much fancier and prettier fonts.

A brief history

The @font-face CSS rule was first introduced in the CSS 2.0 specification and then removed in CSS 2.1, before being reintroduced in CSS 3.0. The fact that it existed in CSS 2.0 is important, because it means that even legacy browsers such as Internet Explorer 6 (the bane of many a web developer’s life) support it.

the @font-face rule was first introduced in the CSS 2.0 specification

Issues

As is usual with such things, there are some issues with regards to implementing @font-face. First of all, as is customary in the world of web development, different browsers support different formats. Why these guys can’t seem to agree on the same format for anything is a mystery to me. So this means that a font defined with @font-face needs to be made available in different formats to be usable by each of the major browsers.

Secondly, not all fonts can be used legally in this manner. As @font-face downloads the required font from the server (where the site is hosted) to the user’s personal machine, the font licence needs to allow this free distribution of fonts. Thankfully there are many font developers out there who are now beginning to release their fonts with the required licence.

Using @font-face

So how can you use @font-face to embed an attractive typeface in your website? The answer is very easily.

First of all you need to pick a font, and ensure that it has the required licence. The best place to go for a comprehensive list of such fonts is Font Squirrel. (Incidentally, the site also has a @font-face Kit Generator which allows you to upload fonts, and I highly recommend using it.)

For this demo I have chosen Hattori Hanzo from Font Squirrel and downloaded the font kit. The kit is a ZIP file that will contain a number of files, most of which are the fonts themselves in different formats, which are:

• EOT – the font format used by Microsoft and supported from IE 4+
• TTF – the outline font standard originally developed by Apple and supported by Firefox 3.5+, Opera 10+, Safari 3.1+ and Chrome 4.0.249.4+
• SVG – SVG uses XML to describe 2D graphics and here, font characters, for the iPad and iPhone
• WOFF – is a repackaged version of a TrueType or OpenType font in a compressed form and is supported by Firefox 3.6+, IE9 and Chrome 5+

As shown above, different browsers support different font formats, and the @font-face CSS rule will reflect this. Included with the @font-face kit will be a CSS file which will contain this rule. Let’s take a look at the one that comes with the Hattori Hanzo font. It contains two font rule declarations, one for HattoriHanzoLight and another for HattoriHanzoLightItalic. Both declarations are the same and simply reference different files, so I will only go through the first:

@font-face {
font-family: 'HattoriHanzoLight';
src: url('Hattori_Hanzo-webfont.eot');
src: local('?'), url('Hattori_Hanzo-webfont.woff')
format('woff'), url('Hattori_Hanzo-webfont.ttf')
format('truetype'),
url('Hattori_Hanzo-webfont.svg#webfontwDgCZ3F8')
format('svg');
font-weight: normal;
font-style: normal;
}

The first part of the @font-face declaration indicates the font-family, in this case HattoriHanzoLight. This will be the name that is used throughout the CSS file to indicate that this @font-face declaration is to be used.

Next is the EOT declaration. This needs to be the first src declaration otherwise Internet Explorer won’t find it and will break. As you can see, it simply points at the font file to use.

The third declaration local('?') tells the browser to check the local system for the font first. If the user has already installed it, then that one will be used. Otherwise the declarations that follow it will be downloaded in whatever format the browser understands.

All you need to do to apply this font to any normal CSS declaraion is to assign the appropriate name to the font-family attribute. For example:

p {
font-family: 'HattoriHanzoLight';
font-size: 16px;
font-weight: normal;
}

That’s it really. Quite simple. I have created a demo page for @font-face and Hattori Hanzo Light for you to see the font in action.

Conclusion

For many, @font-face won’t seem like a big deal. And the fact that the different font formats are rendered differently on the various browsers, with varying degrees of success, may dampen the effect that embedding fonts within a webpage may have. I, on the other hand, believe it to be a big step forward in allowing web developers and designers to produce better looking sites and interfaces that will benefit the end user.