Articles \\ @font-face - Finally Some new fonts for websites!

Bored with websafe fonts? Finally there is something new @font-face allow new fonts on the web


It is very common for use to get website creative that does not adhere to the limitations of "web safe" fonts. The designs look great, but how many people will see that font? Only those of us with that exact font installed on the computer they use to surf. As most people never install new fonts, this means that no one is going to see the fancy typography we'd love to use in the site.

Existing ways of getting custom fonts in a website

There have been ways of getting around the webs safe font limitations. We can use text rendered as graphics, this is terrible for search engines (as they can't read the text), and is a huge pain to update as event the smallest change mean you have to fire up some design software and re-export the image to the webpage.

Another tool we use is called "SIFR". Basically SIFR uses javascript to ready your page when it loads and replaces specific chunks of HTML text with fancy flash text that can be in whatever font you want. This works, but is labour intensive to implement as once you add flash into the mix there's lots of little tweaks and adjustments that need to be done for each browser. It causes a heavy processing load on the browser, as it search text from your HTML page and replaces it with little chunks of flash. Because of performance, it is really only practical to use with titles and other "call to action" text rather then a full article.

The New Way! Font Embedding Using CSS @font-face

One option that is viable is font embedding. Using CSS you can use the @font-face property to add new font-families. All (newest versions) of the major browsers now support font embedding. With font embedding the font is no longer restricted by the user’s machine, but is downloaded with the web page.

example of font embedding using @font-face

@font-face {
  font-family:'Graublau Web';	
  src: url('GraublauWeb.otf') format('opentype');

Font Rendering In Different Browsers

Below are some screen captures of how the embedded fonts are rendered in different browsers. Arial, is the default font in case a embedded font fails, the two embedded fonts were Bitstream Vera Sans Roman and MicroFLF Regular.

Firefox 3

Firefox 3 does not support font embedding; so for each of the fonts the default font will be used, which in this case is Arial. Firefox dosn't particularly have good font rendering so the text will looked jagged.

Firefox 3.5 & Higher

Firefox 3.5 and higher now supports font embedding. Firefox 3.5 uses OTF (OpenType Fonts) but in the newer versions, Firefox 3.6+, it will use WOFF (Web Open Font Format).

IE 7 & 8

IE 7 & 8 supports font embedding and uses a EOT (Embedded OpenType) font.


Safari uses the OTF font like Firefox 3.5

Our impressions

Frankly we were amazed that IE actually worked - (All web developers curse this buggy browser), and surprised when Firefox 3.x didn't. We've also found that you basically need to create a whole separate CSS style for the embedded fonts because you have to build for the case of when it fails. Production time is greater because of this. Unlike SFIR though, it's CSS font tweaking so generally speaking once you sort the formatting for once page, it works site-wide. The quality of the type faces is quite a bit lower then those we're used to created by adobe, or that come installed with windows or mac, so you find fonts that don't have all the characters you'd expect like @ symbols or lower case letters.

Should we use it... Well that depends

If you've got a lot of people using older browsers and specifically older Fire Fox, then it's just going to fail and fall back to the good old web safe fonts, so I'd say it's best to use with those who are the kinds of people who upgrade their browsers often (tech types/web generation). Also if you take a look at the fonts on the list many of them are simply ugly. There's no point in using something that's different, but uglier then the web safe list. So far we don't have any client sites using it but say by the summer of 2010 I'll probably be suggesting it to a few clients.

Oh and be very careful about licensing

People have been talking about the @font-face CSS for a long time. There's nothing too complex about getting it to work that couldn't have been sorted out years ago. The problem is licensing. When you buy a font, it's licensed to be used on 1 computer. @font-face functions by copying the font to the computer of every person looking at your website. Adobe would not be very happy if you started posting their fonts for download on your website, and posting up @font-face CSS using adobe fonts would be doing this except the viewer wouldn't even need to click "download" to get the font.

The two main providers we have looked at TypeKit and Font Squirrel both claim to have legal fonts, but if you want to play safe go with type kit. First off you "rent" the fonts from them and pay an annual fee (or use the free option). With higher cost comes less risk. Their fee structure strongly implies to me that they have licensing agreements for the fonts they offer. Font Squirrel is entirely free and uploaded by users of the site. Nothing stops me from renaming a protected font, and uploading it. I'm assuming there's a community process in place to audit this, but the possibility is real that a commercial font could be released to the site. If you host that font on your site you are committing intellectual property theft, and the owner of the font clearly has the right to stop you from using it. Hopefully this would come in the form of an cease and deist, but it could come in the form of a law suit. What ever fonts you use, find the EULA from the actual font author and keep it on file.