Web fonts – it ain’t just about Arial and Verdana anymore!

Web fonts – it ain’t just about Arial and Verdana anymore!

We had a great discussion regarding web fonts and the future of typography on the web at our monthly Mizzou Web Developers meeting this week. Afterward, designer extraordinaire Josh Hughes sent an e-mail to the listserv outlining some of the basics. I present it to you, kind reader, in its entirety:

Web designers now have a lot of options to expand their typography beyond the typical web-safe selection.

@font-face Embedding

@font-face is a relatively new CSS technique that allows site authors to choose their own fonts. And thankfully it works in almost all of the major browsers, including Internet Explorer.

The biggest problem with @font-face is you can’t (legally) embed any font you want. The license must allow web embedding. Right now most major type foundries do not allow their fonts to be embedded, or if they do it requires a separate license.

So for the most part, you’re going to be left with open-source and other freely-licensed typefaces. Here are a couple decent sources:

For @font-face to work across browsers, at minimum you need a EOT font (for Internet Explorer) and either a OTF or TTF font (for Safari 3.1+, Firefox 3.5+, Opera 10+, and Chrome 4). If you only have one version of the font, the Font Squirrel @font-face Generator is an excellent way to get the required formats.

There are a lot of ways to implement @font-face in the CSS. I generally recommend the Paul Irish method:

	font-family: 'Name of the Font';
	src: url('path/to/FontName.eot');
	src: local('Font Name'), local('FontName'),
		url('path/to/FontName.otf') format('opentype');

A few notes here:

  1. Name of the Font can be whatever you want.
  2. There are two local() references: one is for the full name of the font, and one is for the Postscript name.
  3. If you use a TTF instead of a OTF, change format('opentype') to format('truetype')

From there, all you just have to do is add it to your font and font-family declarations:

	font-family: "Name of the Font", Arial, Helvetica, sans-serif;


Another option is Typekit, a subscription service that hosts fonts for you. It’s very easy to setup, and provides access to a lot of typefaces that aren’t otherwise available for @font-face embedding.

Unfortunately, the plans are based on bandwidth, so using Typekit could get fairly expensive for a heavily trafficked site. Relying on an external service may be a problem as well.

I should note that both Typekit and @font-face embedding carry a couple caveats:

  1. The font will look different on different browsers and operating systems. Typekit makes this easy to visualize by offering a “Browser Samples” tab for all of their fonts.
  2. If the browser hasn’t quite downloaded the font yet, it’ll either first render the text with the closest fallback, and re-render when it finishes, or if it’s a Webkit browser, it won’t render the text at all until the font has loaded.

Add More Local Fonts

If font embedding isn’t quite your cup of tea, there is another fairly easy way to improve your site typography: longer font stacks. There are a lot of fonts that come pre-installed with certain operating systems or software packages, and there’s very little reason not to employ them. For example, you might have a serif stack like this:

font-family: Cambria, Palatino, "Palatino Linotype", Georgia, 
	"Times New Roman", Times, serif;

Cambria is part of the new Microsoft Office suite, Palatino is pre-installed on Macs, Palatino Linotype is pre-installed on Windows. This provides a richer-typographic experience for most of your visitors, and degrades gracefully. Further reading:

Other Options

  • Sifr – Uses Flash to replace text with a custom font. Mostly useful for display type.
  • Cufon – Uses Javascript to render text in a custom font. This method has the same licensing issues that @font-face embedding does.