We can’t change history, but we can change the future.
Be nice to each other.
@robertnyman

Using CSS3 and @font-face to use any custom font on a web site

Published on Thursday, January 27, 2011

I should have written about this long ago, but better late than never – time to share my experiences. Typography is an important part of user experience, and with CSS3 @font-face we can offer users any font we want to.

CSS3 @font-face

Font-face works just like the @media directive, where you declare a font-face’s family name and the source of the font file(s) you want to use. Additionally you can also control the font’s weight and style. A very simple example looks like this:

The smiley character there is basically just a way to avoid referencing a local font on the machine/device and not ending up with what you hoped for. Paul Irish describes this in more detail in Bulletproof @font-face syntax.

As you can see here, first we declare a reference for the .eot font file, to make sure it works in older versions of Internet Explorer. Then we have the bullet-proof approach of avoiding local font files and then specifying various font file references and their formats in consecutive order until the web browser finds a format it supports.

Naturally, this means that you will need to have many formats of the same font to be available to target as many end users as possible.

A demo

Font Squirrel

An excellent resource both for finding open fonts, free to use, and to generate the above @font-face code and corresponding font files, is Font Squirrel. They have ready kits for download and also their @font-face generator – just upload a font file and get lots of formats and ready CSS code back.

Security and protected fonts

This is all fantastic, right? Now can offer any font to the end users of the web sites we build, and our customers can finally use their own font. Well… Since you refer directly to the font files and make them publicly available on your web server, that means anyone can download them. And, as an extension of that, they can install the fonts on their machines, use on their own web sites etc.

While that might not seem like a problem to you, it’s about rights and ownership for the font(s) in use, and it is something you are required to consider.

When using Font Squirrel’s @font-face generator, you have an option that the font should not be installable on any desktop machine, leaving it only working on other web sites. Some customers will be cool with that. However, if you are using a bought font from a font foundry, chances are that you will not be allowed to have that available on your web server (same goes for some companies’ custom fonts).

In that case, Typekit could be an option for you, where they store all the fonts and they will only be accessible from your web site and completely protected. You can look at their pricing and see if it’s interesting.

Therefore, in the end, you need to take each case into consideration and do what’s right. My completely personal view would be:

Choose an open font or find an open font that looks close enough to what you want.

Use the customer’s font and ask them if it’s ok as long as it’s not possible for anyone else to install it on their machines.

Thanks Robert, there has been a lot written about using @font-face but not many posts are as clear and succinct as yours.

For me one very important part of using fonts with @font-face is to thoroughly check the rendering on different platforms and in different browsers. The lack of good anti-aliasing and poor hinting across the board can mean fonts look awful if you don’t choose carefully.

Small coincidence, the @font-face test page I did back in 2009 used the same font, Chantelli Antiqua.

Anyway, the number one feedback I get from designers and front-end developers working on web agencies, building websites for “regular” people on (mostly) Windows is that the rendering is most of the time too bad to inflict on end users. This is the one big issue remaining, now that commercial font licensing and the WOFF format are picking up steam.

We’ll probably have to wait for the demise of Windows XP (end of support is in 2014) and the optimization of fonts for rendering on Windows 7 (still problematic with some fonts), plus the correction of tangential rendering bugs in browsers, for @font-face to become a simple solution. We’re not there yet.

Ha ha, great coincidence! Even funnier considering I had another font first, and changed my mind the last second. 🙂

But you are absolutely right: font rendering in Windows is usually terrible, although better in Windows 7. At the same time, though, what we usually miss in that argument is that every font usually looks bad in Windows, not just the one we have chosen – point is, Windows users are generally not as spoiled with good font rendering.

But yes, at the end of the day, we do need to do testing and evaluation to weigh the pros and cons against each other.

Great article! I used Typekit on a project early in 2010, found it easy to setup and it worked well for the course certificate template editor I was building that required a typical Gothic typeface. So much so, I tried Typekit on my own site for headings and blockquotes.

I found similar issues with Windows rendering, italics were very jagged unless large and typefaces varied as to how readable they were at any given size, so testing across platforms is important 🙂

Thanks for the update!
That is indeed quite interesting. However, with not complete security about IE9 yet and that this new approach needs more testing and usage, while the Mo’ Bulletproofer is work for sure, I think I’d recommend that for now.

But for sure, this is interesting development and I hope it will work out!

I still cant make it work while i tried almost every method on google including this one. Or am i just making some small mistake ? In google chrome and firefox it works well. But in ie8 and ie9 it just wont work. (hate internet explorer..) here is my code: