Bye Verdana, Hello Delicious

Sun 25/Oct/2009

Date

Fonts on the web is a lively debated subject these days. With solutions like TypeKit, Typotheque, Fontdeck and .webfont on the horizon, the future of web typography is looking bright.

So why now? We’ve wanted richer web typography for ages. Why are all these new services starting to pop up now all of a sudden?

One major reason is Firefox 3.5. With this latest release, we now have a situation where finally all major browsers support the long awaited CSS property @font-face. And with this new possibility – the possibility of including basically any font of your choice – the whole rights issue has become much more evident. @font-face has in its simplicity no way of securing the used fonts, meaning it’s dead easy for your visitors to simply just steal your font. Hence the need for a secure way of displaying your expensive font.

While these rights issues are being sorted out, there is however no reason for you to just sit and wait. The new situation actually opens up a whole new world of possibilities, today. The way to go is to find those fonts that do allow for web inclusion, because they do exist (even if some are of higher quality than others).

Finding fonts

A good place to start is the excellent Font Squirrel who have collected nearly 600 font families for you to download and use. They also offer many of them in kits with the EOT format (more on that later) already included.

Other resources include Smashing Magazine, Open Font Library and WebFonts.

Using @font-face

Once you’ve found the font that feels just right for your site, the procedure of making it work is pretty straightforward.

Start off by uploading your font to your web server. Note that you’ll be using separate files for each weight (regular, italic, bold, etc.) of the font.

Next we’ll define our own font name to use in the font stack. This is where @font-face comes in.

@font-face {
    font-family: 'Delicious';
    src: local('Delicious-Roman'), local('Delicious Roman'),
url('/fonts/Delicious-Roman.otf') format('opentype');
}

To be able to use italic and bold we have to explicitly include these files as well. We use the same font-family but add declarations for font-weight and font-style.

@font-face {
    font-family: 'Delicious';
    font-weight: bold;
    src: local('Delicious-Bold'), local('Delicious Bold'), 
url('/fonts/Delicious-Bold.otf') format('opentype');
}
@font-face {
    font-family: 'Delicious';
    font-style: italic;
    src: local('Delicious-Italic'), local('Delicious Italic'), 
url('/fonts/Delicious-Italic.otf') format('opentype');
}

Note the local declarations. These enable visitors to use the already installed font would that be the case.

And that’s really all there is to it. To now use our new font we simply add our defined name first in the font stack.

p {
    font-family: Delicious, Arial, Helvetica, sans-serif;
}

Internet Explorer

To make this fly in Internet Explorer we (might) have some more work to do, since IE only accepts font files in the EOT (Embedded Open Type) format. While sites like Font Squirrel might have this format ready for download, this is otherwise where things (up until recently) used to get really painful. To create the EOT files you had to use the most frustrating program known to man, WEFT. And be on Windows. Just the other week though, I stumbled upon a web-based tool that does the trick, ttf2eot.

ttf2eot though requires (for the time being) that your font is in TrueType format. So if you start off with otf, you’ll have to convert it to ttf first. Luckily, this can easily be done using the free tool FontForge.

So now that we have our corresponding eot files, and have uploaded them to our web server, it’s time for the IE declarations. In your IE specific CSS, define the following:

@font-face {
    font-family: 'Delicious';
    src: url('/fonts/Delicious-Roman.eot');
}
@font-face {
    font-family: 'Delicious';
    font-weight: bold;
    src: url('/fonts/Delicious-Bold.eot');
}
@font-face {
    font-family: 'Delicious';
    font-style: italic;
    src: url('/fonts/Delicious-Italic.eot');
}

And we’re done! You now have your self-chosen typeface available for users of IE 4+ (I know, I can’t believe it either), FF 3.5+, Safari 3.1+ and Opera 10+. That’s roughly 74%* of all Internet users! (Chrome 3 strangely enough requires some tweaking to get it working.)

I’ve set up an example if you want to see it all in action and examine the source code more thoroughly.

Getting creative

Once you get a hold of how it works, it’s easy to become more creative and extend the usage. Your only limit is more or less bandwidth; each font file is downloaded to the user before applied. A good thing might therefore be to limit the number of characters in your included files as that can dramatically reduce file sizes. This can easily be done with above-mentioned FontForge – just remove characters you don’t need and save back.

Optimizations aside, the possibilities are endless. Really graphical typefaces, real small caps, drop caps to name a few. View the slightly more creative example for inspiration on what can be done.

* As of September 2009 according to W3Counter.