I have been getting quite a few questions about web fonts lately which reminds me of just how far the web has come over the years. In 2005 I went to a talk by Ellen Lupton, she was promoting her book, “Thinking with Type”. She spoke mostly about ligatures and smart/dumb quotes but what I remember most was a question from an audience member. He asked, “What do you think about how we are limited to using only 10 fonts on the web?”. In her answer, she claimed that is was probably a good thing as people might set their body copy in an undesirable and hard to read font.
I understood where she was coming from but at the time, but I remember thinking, “But why should print designers have all the fun?”. I was used to this limited choice of typefaces on the web and thought that I would always have to import images when I wanted a headline in a particular font. This was the way of life for web designers before @font-face changed our typographic world.
The New World of Web Typography
After some trial and error from the web industry (which at one time included a javascript based technology called Cufón), a standard was finally been put into place which allows CSS to serve up actual font files to the user’s browser. The @font-face rule allows web designers/devs to link to specific font files on their server and reference it in their CSS.
Here is a simple example where I’m changing the heading to “Lato”:
@font-face {
font-family: 'Lato';
src: url(http://example.com/fonts/Lato.woff);
}
h1 { font-family: 'Lato', Arial; }
However, what has made this a little tricky has been the fact that different versions of browsers accept different types of font files. If you want to safely support most browsers, even older ones, you will need to include font files with the extensions, .WOFF, .EOT, .TTF, and .SVG. Since we are only linking to the .WOFF file in the example above, if the browser does not support .WOFF, it will show Arial instead. If your selected typeface includes italicized fonts and different weights, you will also need to link them as well.
Web Font Resources
Google Fonts
The first resource I would recommend if you are new to the world of web fonts would be Google Fonts. Since the fonts are hosted on Google, the process of linking the correct files is a bit easier. Click the Quick Use link under your selected font for instructions.
Font Squirrel
Font Squirrel has gathered many fonts from all over the web. They also have a handy Webfont Generator that allows you to covert fonts to the necessary .WOFF, .EOT, .TTF, and .SVG extensions to use online. With Font Squirrel, you’ll have to be extra careful to read the licenses, make sure any fonts you convert or find on their site have licenses that match the way you are implementing them.
TypeKit
Typekit allows you to basically rent fonts to use on your site. For a yearly fee, you are able to use any of their selection of fonts on your site.
Type Foundries and Collections
Type Foundries like Hoefler & Frere-Jones offer desktop and web licenses. Sites that feature typefaces from multiple foundries and designers, such as YouWorkForThem and Fonts.com, are also a great resource.
Keep in Mind
When using web fonts, make sure you have a license to use them on the web. Sometimes you’ll have to purchase an additional license. Another thing to keep in mind is the fact that not all type foundries sell web licenses. This means that sometimes that wonderful typeface that you’ve been using in your printed brochures cannot be used on the accompanied website.
Want to use bold or italic text? You’ll need to make sure you also link in the appropriate version of the font, otherwise it will add a faux bold or italic style which will look distorted and unprofessional.
Don’t make Ellen Lupton’s (and everyone else’s) nightmare of illegible type become real! When choosing a typeface legibility should be your primary responsibility.
And, of course, have fun!