Use your own webfonts

by Seth Kenlon

Fonts are often a mystery to computer users. How often have you designed a cool flyer and taken the file somewhere for printing, only to find all the titles rendered as Arial because they don't have the fancy font you used in your design? There are obviously ways to prevent this; you can convert words using special fonts into paths, or you can bundle fonts into a PDF, or bundle open source fonts with your design files, or at least list the fonts required. And yet it's still a problem, because we're human and we're forgetful.

The web has, historically, had the same problem. If you have even a basic understanding of CSS, then you've probably seen this kind of declaration:

h1 { font-family: "Times New Roman", Times, serif; }

This is a designer's attempt to define a specific font and also provide fall-backs in the event that a user viewing a site doesn't actually have Times New Roman installed, and then another fall-back in the event that the user doesn't have Times either. It's better than using a graphic instead of text, but it's still an awkward, inelegant method of font non-management, but in the early-ish days of the web, it's all we had to work with.

Webfonts

Then webfonts happened, moving font management from the client to the server. Fonts on web sites were rendered for the client by the server, rather than requiring the web browser to find a font on the user's system. Google and other providers even host openly licensed fonts, which designers can include in their sites with a simple CSS rule.

The problem with this free convenience, of course, is that it doesn't come without cost. It's $0 to use, but major sites like Google love to keep track of who references their data, fonts included. The good news is that if you don't see a need to assist Google in building a record of everyone's activity on the web, then you can host your own webfonts, and it's as simple uploading fonts to your host and using one easy CSS rule. As a side benefit, your site may become faster to load, as you'll be making one fewer external call upon loading each page.

Self-hosted webfonts

The first thing you need is an openly licensed font. This can be confusing if you're not used to thinking or caring about obscure software licenses, especially since it seems like all fonts are free. Very few of us have consciously paid for a font, and yet most people have high-priced fonts on their computers even as they read this article. Thanks to licensing deals, your computer may have shipped with fonts that

you aren't legally allowed to copy and redistribute

yourself. Fonts like Arial, Verdana, Calibri, Georgia, Impact, Lucida and Lucida Grande, Times and Times New Roman, Trebuchet, Geneva, and many others are owned by Microsoft, Apple, and Adobe. If you purchased a computer preloaded with Windows or Mac, you have paid for the right to use the bundled fonts, but you don't own those fonts and are not permitted to upload them to a web server (unless otherwise stated).

Fortunately, the open source craze hit the font world long ago, and there are excellent collections of openly licensed fonts from collectives and projects like

The League of Moveable Type

, and even

and

You can use most common font file formats, including TTF, OTF, WOFF, EOT, and so on. Since Sorts Mill Goudy includes a WOFF (Web Open Font Format, developed in part by Mozilla) version, this example uses that. However, other formats work the same way.

Assuming you want to use

Sorts Mill Goudy

on your web page:

1. Upload the `GoudyStM-webfont.woff` file to your web server:

2. In your site's CSS file, add an `@font-face` rule, similar to this:

The `src` value is the path to the font file itself. The path to the font must be appropriate for your server's file structure; in this example, I have the `fonts` directory existing alongside a `css` directory. You may or may not have your site structured that way, so adjust the paths as needed, remembering that a single dot means *this folder* and two dots mean *a folder back*.

3. Now that you've defined the font face name and the location, you can call it for any given CSS class or ID you desire. For example, if you want `<h1>` to render in the Sorts Mill Goudy font, then make its CSS rule use your custom font name:

You're now hosting and using your own fonts.

=> webfont.jpg It works! [IMG]

*Thanks to Alexandra Kanik for teaching me about `@font-face` and most everything else I know about good web design.*