I have been working on a new website, just a little one page site to start with, for The Coffee House in Stow on the Wold. They already have a strong corporate brand with a 1920s look, using a font called Parisian so I wanted to incorporate that in the website design.
Fonts have traditionally been a bit of a nightmare for web designers, the web browser loads the fonts from the user’s computer. If the font you asked for isn’t installed on the user’s machine then it will default to something else, this means that what the user sees may be quite different from what you intended.
My first thought was “goody a chance to use Typekit for real!”. Typekit is a new service which lets you use real fonts on your own website, the fonts are loaded on demand from the Typekit website. This means that you can use proper fonts in a legitimate way but let Typekit deal with all the licensing issues. You have to pay for most of the fonts of course but the charges are quite reasonable and an awful lot better than licencing direct from the big commercial suppliers.
Unfortunately Typekit didn’t have the exact font I wanted (they are very new and their library of fonts is still growing), but I did discover a free version of the font on fontspace which used the Open Font License (OFL) so I could legitimately incorporate it in the new website. I was able to do this because the most modern browsers are now starting to support the CSS @font-face declaration properly (though to be fair Internet Explorer has supported @font-face since IE4 way back in 1997).
But of course to work properly I had to provide the browser with the font in a format it could understand. Thank heavens for Fontsquirrel’s @font-face generator which converts your existing font file into all the necessary different formats and even supplies you with the CSS code to use them.
So now I had fonts installed and ready to test, I always test any website as extensively as as possible but rarely have I had as wide a range of results as this. The following table shows my experience with the various browsers available to me.
| Browser | version | font file | screen | printer |
|---|---|---|---|---|
| Internet Explorer | IE6 | .eot | Works fine but typeface is much smaller than other browsers | Sort of works but doesn’t print the full page width. |
| Internet Explorer | IE8 | .eot | Works fine but typeface is slightly larger than other browsers | Works fine |
| Firefox | 3.0.15 | .ttf | Doesn’t use @font-face font, uses font-family declaration to find a font which exists on the local machine. | Doesn’t use @font-face font, uses font-family declaration to find a font which exists on the local machine. |
| Firefox | 3.5.5 | .ttf | Works fine | Doesn’t use @font-face font, uses font-family declaration to find a font which exists on the local machine. |
| Firefox | 3.6 beta 3 | .ttf .woff |
Works fine | Doesn’t use @font-face font, uses font-family declaration to find a font which exists on the local machine. |
| Safari | 4.0.4 | .ttf or .svg |
Works fine | Works fine |
| Chrome | 3.0.195.32 | .svg | Works fine | Works fine |
| Opera | 10.01 | .ttf .svg |
Works fine on live site But displays Times New Roman instead of the @font-face font on my local machine, this is the default action for pages without any specific style set. I imagine that there is some subtle difference in the server setup between the two machines but I don’t know what it is and it doesn’t affect any of the other browsers. |
Works the same as it does on the screen. |
| Konqueror | 3.5.10 | .ttf | Doesn’t use @font-face font, uses font-family declaration to find a font which exists on the local machine. | Doesn’t use @font-face font, uses font-family declaration to find a font which exists on the local machine. |
All this is very confusing but the conclusion is that I think @font-face is now well enough supported to be used on a live site. Support should get better over the next few months, particularly as Firefox users move on to version 3.5 (or even 3.6 which supports .woff files).