Web Fonts

Traditionally, font use has been very restricted on the web, mainly due to technological and legal constraints. Web designers were stuck with a handful of safe options, and as we all know, safe is *boring*. For years we struggled with hacky "solutions", just to inject a little personality into our work.

I am pleased to say, things have come a long way since then. The tools are here to reliably support custom typefaces in all major browsers, in a standards-compliant way. Mmmm... standards compliance.

A little history

When web browsers first arrived, they were basically text viewers. Every web page was drawn with a single, user-specified typeface. This was deliciously functional, but not very pretty. Soon enough, browser developers gave us ways to add visual style, allowing us to specify new colour, layout and font options inside the HTML. Web design was a thing now!

Unfortunately, inevitably, in all the commotion, they screwed up big time. HTML exists so that computers can make sense of human-derived data; it allows us to index, search, and connect knowledge in meaningful ways. By including visual design into this precious markup, we were polluting the system. The World Wide Web was designed for sharing *information*, not rainbow text and 'under construction' GIFs. Computers simply don't care about your hot pink background color.

While the boffins figured out a solution, we were stuck using the `<font>` tag for our custom typefaces. It meant a web page could have more than one font on it, in any color, at any size. This was useful, but still lacked a method of serving custom fonts. A user had to own the specified font to see pages as the designer intended.

CSS to the rescue!

After a little more time spent ruining things, we were finally granted relief in the form of Cascading Style Sheets. They were, and still are, the preferred way of separating web content from web design.

Colour, alignment, margins, etc. are all defined in the CSS, leaving the HTML alone. Now the HTML needn't contain anything except cold, hard information. The humans were happy, and the computers were happy!

I wasn't happy. *Still* we had no way to use custom fonts properly. Regardless, web designers are an inventive bunch, and came up with some clever techniques for faking it;

Text replacement techniques

Fahrner Image Replacement (FIR)

FIR involves hiding text, then placing an image of the same text over it, rendered in the font of your choice. It truly is an awful method. It usually requires extra HTML markup (bad bad bad!), the text can't be manipulated without re-rendering the image, text can't be scaled, and it's just a massive pain. Please don't use it.

Scalable Inman Flash Replacement (sIFR)

sIFR is similar to FIR, except a Flash file is placed instead of an image. This has some benefits. Text can actually be selected (though not with native browser functionality). The text changes when the HTML changes, so no re-rendering is necessary. Being a vector format, the text can be scaled without getting blurry. The flash file can inherit text size and colour from the original text's CSS definition.

My main problem with sIFR is Flash itself. It's not a web standard technology, and therefore isn't ideal for something as basic and important as text. It relies on a plugin, so the page loads more slowly. We shouldn't be using a sledgehammer to bang in a drawing pin.

sIFR; better than FIR, but not much better. Avoid it!

Cufón / typeface.js

Cufón (and typeface.js) takes a more standards-based approach. The existing text is again hidden, but this time a `<canvas>` element is placed over it. `<canvas>` is an HTML standard element, able to do custom font drawing (and much, much more). Cufón stores the font as coordinates, then renders the words out with Javascript, into lots of little canvasses.

Text updates automatically, as with sIFR. Typeface.js text can be selected and copied, Cufón can not. Basic CSS styles are inherited from the original text. Performance becomes a slight issue when large chunks of text are converted to canvas elements.

Despite a few drawbacks, it's not a terrible solution. We've used it a lot in the past, and it is technically valid, if a bit shoehorned. Use Cufón or typeface.js if you have to, but be aware of the other, much better solution...

Enter @font-face

This is what we've been waiting for. The holy grail of web typography. No longer do we need to fake our fancy fonts. The CSS @font-face declaration means we can use font files in web pages as if they were installed on the user's system!

@font-face is a web standard especially designed for custom typefaces on the web. The HTML and DOM isn't touched, there's no reliance on javascript or external plugins, and browser support is excellent (even in IE4!). The font acts like a non-custom font would; you can select, copy and style the text with all the flexibility of a paragraph in Helvetica. All those fancy CSS3 text-shadows and transitions are fully compatible too.

Best of all, there are hundreds of free @font-face compatible fonts out there. [FontSquirrel](http://www.fontsquirrel.com/) is one of our favourites. It even offers @font-face kits, containing the CSS and font files ready to go.

The Google Web Fonts Directory is another free web font service. The fonts are hosted on Google's servers, and added to your page with a `<link>` tag. It's super simple to use, and transfers the burden of large font downloads away from your web server.

Alternatively, paid subscription-based services provide professional web fonts, especially tweaked to look fabulous in web browsers. Typekit and Fontdeck are two good examples.

It's really important for developers to stay up to date with the latest standards and technology. At Ten4, we are phasing out the use of Cufón in favour of @font-face. We think it's been very successful - take a look at some of our latest work.