Fuzz Productions

Quality Fonts on Web Pages

Fonts on the web are tough, balancing between standards and style. Some designs rely on beautiful typography, which cannot be covered by the 18 standard fonts available to windows, mac, and linux. In order to meet design requirements, there are several solutions: image replacement, sIFR, cufon, and @font-face are all viable and have advantages and disadvantages.

Fuzz has been using image replacement and sIFR to meet 90% of design requirements, but each requires quite a bit of work to set up - image replacement doesn’t work for dynamic text and has accessibility problems, and sIFR suffers from needing adobe flash to work. Recently, since Firefox and Webkit have added CSS3 support for it, @font-face has been taking over for these solutions, for a couple of very good reasons. First, it integrates into standards-based web sites painlessly and fast.

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

The first line defines what name you would like to use in your normal css font-family attribute, the second line specifies a .eot font for use with IE (support back to IE4!) and the lines after that are for other browsers. If you need to host a font on a separate web site (like Fuzz needs to for this tumblr blog), you would use

url('http://www.myurl.com/path/to/myhostedfont.eot')
...
url('http://www.myurl.com/path/to/myhostedfont.otf') 

instead of

url('mylocalfont.eot')
...
url('mylocalfont.otf') 

Ready to use the font in your webpage? Its as easy as changing

font-family: Arial, sans-serif

to

font-family: 'Graublau Web', Arial, sans-serif;

and the @font-face will be added into your set of fonts that gracefully fail into the standard fonts. After hassling with sIFR for this blog, we had @font-face working within 5 minutes, and it fit into the workflow perfectly, without javascript or flash to worry about.

The only concern is making sure that the font files are in the correct file type, so Fuzz uses Font Squirrel to ensure that everything is in the right format. The FontSquirrel download even comes with a sample page, to verify that everything is working properly.

It seems that the age of the 18 generic fonts is over, and quality typography can finally make an appearance on the web.