Firefox 3.5 and the potential of Web typography

In addition to new features such as support for HTML 5, geo-location, and a noticeably faster engine, Firefox 3.5 added a new CSS rule that makes Web typography much more attractive.

@font-face is a CSS rule that allows Web designers to reference fonts not installed on end-user machines. Just as you would have a pointer to a server-based stylesheet or JavaScript file in your Web page code, you can now make reference to a hosted typeface.

You'll note that news sites such as CNET News and NYTimes.com are optimized to make Web type more readable and as stylish as possible, but there are many design possibilities via additional downloadable typefaces. (As with any linked asset, there is some level of security risk if a hacker gets their hands on the font file.)

Mozilla's John Daggett explains: Within a stylesheet, each @font-face rule defines a family name to be used, the font resource to be loaded, and the style characteristics of a given face such as whether it's bold or italic. Firefox 3.5 only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.

This function is something I would have expected to be commonplace by now (Safari began supporting it in Version 3.1 and Opera in Version 10) but neither have the market share to drive usage the way Firefox and Internet Explorer do. (Note: this function doesn't work in IE.)

Generally speaking, the Web browser has done a terrible job with type. We've been stuck with old standbys such as Helvetica or Times New Roman, and don't forget the oft-loathed Comic-Sans and other delightful Microsoft fonts that are often easy to read but lack any real style (Verdana, for example.)

As Ian Lynam and Craig Mod write: "Fine typography has always been one of the stumbling points of Web design. Limited at most to a handful of cross-platform specific fonts, Web designers have often found it necessary to hack their way into typographically nuanced territory."

New font possibilities won't necessarily make you more popular or a better designer, but @font-face does open the door to make Web pages much more attractive and readable without being forced in Flash or other plug-in based solutions.

This of course is provided that font developers figure out ways to make their typefaces available freely or in a manner that encourages developers to use them. From a technical perspective, Firefox 3.5 allows fonts only to be loaded for pages served from the same site. This prevents sites from freely using fonts found on other sites and gives a bit of protection, but not much.

Most commercial type foundries aren't prepared for this and generally don't have licenses that are conducive to this type of use. But there is a big opportunity to get stylish new typefaces onto browsers worldwide, provided font designers are ready to embrace an open mindset.

(Note: I recognize the irony that I can't use the @font-face tag to demonstrate. Please take a look here and here for examples.)

Follow me on Twitter @daveofdoom.