One of the new and exciting features I’m loving in CSS is the ability to include custom fonts in your website. The best thing about it is that it’s all done in browser. In this post we are going to look at this exciting new feature.

That’s right, our prayers have been answered. We can now have any font we like on our website just by using the @font-face property now included with CSS. With @font-face being a CSS rule custom fonts are generated natively in our browsers, this means there’s no need for canvas/VML alternatives like Cufon, or even flash replacements like sIFR.

Browser Compatibility

From my own testing I can confirm that the latest versions of Firefox, Google Chrome & Safari show the @font-face rule wonderfully. Here is a list showing compatibility for all the popular browsers. The version number is the version at which support was first introduced. It also shows what font file types are supported.

  • Firefox 3.5: TTF (True Type), OTF (Open Type)
  • Firefox 3.6: TTF (True Type), OTF (Open Type), WOFF (Web Open Font Format)
  • Safari 3.1: TTF (True Type), OTF (Open Type)
  • Opera 10: TTF (True Type), OTF (Open Type)
  • Internet Explorer 4: EOT (Embedded Open Type)

The Syntax

The syntax for @font-face is quite different to other CSS properties. It is more like a selector, or a rule. Here is how it’s used:

@font-face {
    font-family: myCustomFont;
    src: url(path/to/my/font);
}

You can use quotes or single quotes around the name & url if you wish. That is the basic setup though. I am unsure as to whether you can define more than one font per @font-face rule. Every time I have tried it fails, so I’d advise using a new @font-face rule for each font you wish to include.

An Example

There is already an example of @font-face at work on this site. In the header of the index page. The big text to the left of the large illustration is actually written in a GPL/AFPL/LPPL licensed font called TeXGyreAdventor using CSS. It isn’t part of the image. Just in case though here is another example. This will only be visible if you are using one of the browsers that supports TTF/OTF files as I don’t have any EOT fonts to try.

This is some text. It is written in a custom font called TeXGyreAdventor.

There we have it. That is a custom font.

Copyright Issues

One massive road block with using fonts is copyright & licensing issues. I was going to use Century Gothic for the header of the site, but learned it has to be licensed separately for use with @font-face. Please be sure before you use a font that that it’s license allows you to use it on websites with @font-face. If it is a pay for font there is a good chance you won’t be able to use it unless you buy a @font-face based license for it.

@font-face is CSS 2

Yes, the @font-face rule is actually from the 2nd CSS Specification, however not many browsers adopted it. Only IE, as far as I’m aware, used it and even then (and now) Internet Explorer only supports EOT files, which aren’t very common. If you really want an EOT file you can convert TTF to EOT using an online tool such as this one by Sebastian Kippe.

That’s it really. Custom font’s can be amazing when used correctly, and will hopefully negate the need for font embedding & canvas/VML based tools. However it would be nice it IE would start supporting TTF/OTF files like everyone else… Hmmm! Yet again Internet Explorer is letting the group down.

As usual if you have any questions, comments or something to add feel free to do so in the comments.