CSS 3: Custom Fonts Using @font-face

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)
• iPhone/iPad iOS 4.1 or lower: SVG (Scalable Vector Graphics)
• iPhone/iPad iOS 4.2+: TTF (True Type)
• iPhone/iPad iOS 5+: TTF (True Type), WOFF (Web Open Font Format)

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:

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.

To support multiple browsers at once, if you have all the relevant font files, you can use something like the following to define multiple sources:

As you may have noticed, local, is something I haven’t mentioned. This just checks your computer for a font matching the name and loads it. Although unlikely, it’s good to check as it is one less thing to load if the visitor does have the font.

All of the different formats are for the different browsers, as mentioned in the browser compatibility list above. If you have a font that doesn’t have these formats you can use a font converter, but please be wary of the potential copyright problems that I mention later in this post.

One other thing to know about defining a @font-face font is that you can define alternate weights and styles. Take a look at this:

Once you’ve done this you can use these different weights incredibly easily. We’ll take a look at how to do that after we have looked at how to use a declared font normally.

Using Your Declared Font

So how do you use your newly declared font? Well, it’s actually pretty simple. You use it like any other font, with the font-family property. Just set the value to the name use used when defining your font via @font-face. Like this:

Pretty simple. If you have declared multiple weights it is very simple to use those too.

That will use the bold version. Just be aware that while you can still use weights/styles that you have not declared fonts for, it will apply something users of Photoshop may be familiar with. Faux bold. Unfortunately the browser’s version is no where near as good as Photoshop’s and (generally) miles away from the actual bold version of the font. So please, if your font has various styles make sure to add an @font-face declaration for each of them.

Copyright Issues

One massive road block with using fonts is copyright & licensing issues. Many a time a client has asked if they can use a certain font & I’ve had to say no, because they don’t allow web use. Or alternatively they didn’t want to pay the fee (sometimes yearly) if it was available for web use. 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 if IE would start supporting TTF/OTF files like everyone else, I’d be even happier if they included WOFF too… 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.

@font-faceCSSCustom FontsTTF