Fonts Alive: Why you can't use your favorite font on your web site.

Many of my customers like to get very involved during the development of their web site.  Whether it's a site redesign, or a completely new look, it's fun to participate in how it comes together.

One problem my clients and I run into often is when they suggest that perfect font they love, that they found in their office program, that would go great with the new site.  "I have bad news for you", I have to tell them, "you can't use that font online."

The trouble with fonts is that it's up to the computer viewing the site to render them.  The viewing computer recieves text and some instructions on which font to use.  But what if that computer doesn't have the suggested font installed?

That's where things get troublesome.  Because of the wide range of computer operating systems, versions, browsers, and installed (and missing) fonts, it's very hard to predict what will happen when someone on a different type of computer views your page.

Maybe the viewer will pick another font that closely matches the intended one.  Maybe not.  Maybe the text won't render at all.  Maybe a mismatched size will break the layout of the page.   

"But I put my font in my web page myself, and look, it shows up just fine on my computer!"  Well, sure it does, since you already have that font installed on your computer!  But when viewed on other computers, the results will be erratic and unpredictable (depending on how exotic your font is).

That Sucks, But I've Resigned Myself.  What are my Font Options?

Here are a list of web safe fonts (that are installed on both Mac's and PC's, and that both render more or less the same):

Arial
Arial Black
Book Antiqua
Comic Sans MS
Courier New
Geneva
Georgia
Helvetica
Impact
Lucida Console
Lucida Sans Unicode
Monaco
MS Sans Serif
MS Serif
Palatino Linotype
Symbol
Tahoma
Times New Roman
Trebuchet MS
Verdana
Webdings
Wingdings

Take a look at this page for a nice comparison of the different fonts.

Other Options

"But wait a minute!" you say, "I see cool special fonts displayed all the time online, and they are consistently displayed!".  The top buttons of this very web site, for example, or in a special font, as is the logo, seblin.com, and there are countless other examples.

The trick with these is that they are in fact images, not text.  It's easy to check this, just try to select the text (as if you were going to copy and paste it), you'll find you cannot.

So why not just make all the text into images?  Lots of reasons:

- Images are not Search Engine friendly (search engines can only read text, they can't (yet) view an image)
- Images don't work for screen readers, or for viewers with disabilities that depend on the computer being able to read the text on the page
- Images take a long time to load, compared to text.  Text is almost instantaneous, even on slow connections, but images can take a very long time to download, making viewing your page tedious or impossible.

So the rule with using images in place of text to achieve a good visual effect is to use this technique very, very sparingly (as sparingly as you can possibly stand, actually). 

Conclusion

While not ideal, designing engaging, attractive web sites that function as well as they look is about balance.  It's possible to create fantastic-looking sites without letting a few compromises derail your dreams!