on Code

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.

[sourcecode language=’css’]

@font-face {
font-family: “Fontin”;
src: local(“Fontin”), url(fonts/Fontin-Regular.otf) format(“opentype”);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Here we're creating our own font family, which we're naming "Fontin". Note we didn't have to call it Fontin just because that's the name of the font - any old name will do.  Next we're specifying the source for the font, with two options. The first tells the browser to look on the local machine for a font called Fontin and use it if there is one, saving the user a download. You may not want this if there are a lot of disparate versions of the font you want to use floating around, but Fontin is stable. The second source argument tells the browser to grab the font from the web server.

Specify the Fontin range of fonts (regular, bold, and italic) like so:

[sourcecode language='css']

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

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.

[sourcecode language=’css’]

.fontin {
font-family: Fontin, Arial, Helvetica, serif;
font-size: 14px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Internet Explorer still only supports the EOT format, but that isn't too big of a problem. First, you'll need to convert your TTF or OTF font file to an EOT format. There are a lot of ways to do that, but this <a href="http://onlinefontconverter.com/">site does</a> a bangup job, even going directly from OTF to EOT. Then we'll add another line to our @font-face blocks.

[sourcecode language='css']

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

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.