Web fonts are something that is undergoing explosive change. A couple of years ago you basically had no choice. You had to use a font which would be installed on all computers by default, and the set of such fonts was extremely small (Helvetica, Georgia, Arial, Times, ect...) These days, with some caveats, it's possible to load fonts along with your page, freeing the designer to use specimens that are not already installed on the browser's computer.

The now standard (but not necessarily without peril across browsers and platforms) @font-face CSS rule allows anyone to embed their own fonts into web pages. Paul Irish has an in depth look at the issues and offers a bunch of work arounds for common problems. But beyond even these technical issues (due mostly to browser differences) there is the issue of most high quality fonts aren't licensed for use like this. (i.e., just because you own a bunch of great adobe fonts doesn't mean you are allowed to embed them in web sites you make.)

Typekit is an Adobe web service that allows you to choose from a huge selection of fonts. Fonts are downloaded to the browser from the Typekit servers. It's not free, but it's reasonably cheap ($50 - $100 per year depending on usage), and the quality is very high. And you don't have to worry about licensing issues.

Google Web Fonts is a similar service. The quality is probably not as high (there are lots of fonts in the collection without bold and italic versions, plus lots of just bad fonts since anyone can contribute to the collection), but it's free, and the fonts are all legal to use. I used GWF on the Louis/Dressner site (metrophobic for most of the text.) Some people have collected what they consider just the "good" Google web fonts so you don't have to wade through all the chaff in Google's directory. For instance: Better Google Web Fonts.

Some type foundries have free downloadable fonts. Prime, from Font Fabric, is one I want to remember for an upcoming project.

There are issues, but I think it's usable. And it's great to see some variation in fonts on the web.

Still, if you want to stick with the old way (using only fonts already available on the browser's computer), there well may be a bit more variation in what is possible then what is commonly assumed. CSS Font Stack is a nice collection of font stacks that should be reasonably safe to use. (We say "stack" because you can specify several different fonts for each use, and any particular browser will try to use the first specified, but if it isn't installed on the computer it will try the next font specified, and then the next.)

- jim 1-08-2013 3:23 pm

Typekit example font pairings from Daniel Eden.
- jim 1-09-2013 4:32 am





add a comment to this page:

Your post will be captioned "posted by anonymous,"
or you may enter a guest username below:


Line breaks work. HTML tags will be stripped.