Using @font-face For Better Typography
I’ve been on a big web design kick lately, so I thought I’d do a quick post on using @font-face for custom typography on your web page.
@font-face has been around since CSS2, and the first browser to take advantage of it was Internet Explorer 4(!). It fell out of favor for quite a while, for two reasons:
- Licensing. Yes, fonts are licensed believe it or not, and since rendering your font means downloading the font to the user’s PC, that’s a problem. For the overwhelming majority of fonts sitting on your PC (my Linux brethren notwithstanding), you aren’t allowed to stick them on your web site.
- Formats, which is related to licensing. Microsoft came up with the EOT format, which tries to get around the licensing problem via DRM-ish stuff. Nobody bit on that solution. There was TrueDoc, a format used by Netscape, but when they were unable to open source those bits it faded into history. Then there are SVG, TrueType, OpenType, and WOFF formats. Good grief! No wonder they can’t agree on a HTML5 video codec.
In today’s world, most browsers (Webkit/Safari/Chrome, Firefox, Opera) support both TrueType and OpenType fonts, so that is your target format. We’ll talk about Internet Explorer in a bit. For this example we’ll use the excellent Fontin font. Drop it somewhere in your web site directory - here we’ll say we stuck them in a folder called fonts.
src: local(“Fontin”), url(fonts/Fontin-Regular.otf) format(“opentype”);
Now I’ll set up a fontin class that we can add to whatever tags we want to use that font in. Note I give alternate, bail-out fonts in the font family stack just in case.
font-family: Fontin, Arial, Helvetica, serif;
Notice the extra src line in each @font-face block pointing to the EOT files? That’s all that is required. Browsers ignore CSS lines they don’t understand, so IE picks up on the EOT and ignores the rest, and vice versa for the other browsers.
Font embedding is a great way to add a typographic flare to your web site, but don’t overdo it. Downloading the font files is time and bandwidth for your users, and with these sorts of things, less is often more.*
*The great lesson of District 9 - a few well done special effects beats a two hour CGI crapstorm. This applies equally well to web design.