There are an awful lot of fonts in the world! For years, no doubt, you’ve been using a ton of them in word processing documents, party invitations, banners, etc. But have you ever noticed how few of them are used on the web?

There’s a really good reason for this. When a web page loads, the browser is told to write text onto the screen using a specified font—one that is stored on the computer that the browser is running on. Therefore, if the web page’s code is calling for a font that a user does not have installed on their computer, it won’t show up! What that person will instead see is a default font, which might look a little ugly.

Now you might be wondering why this will happen so often if there are so many fonts installed on your computer. Well, here’s the problem: the two most widely-used operating systems—Windows and Mac OS X—each come installed with a different set of fonts. Awesome!

To illustrate this point, here’s where the fonts are stored in Windows 7:

And here’s where they’re stored on Mac OS 10.6:

Right away, we can see that only one of the displayed fonts overlaps: Arial. None of the Calibri or Cambria fonts are available on the Mac, and the Mac has at least a dozen just on this page that aren’t available in Windows!

In fact, between these two systems, there are only ten fonts that overlap:

Those fonts that fall into that middle area, covered by both operating systems, are what we call web-safe fonts. If you use Calibri on your webpage, Mac users won’t see it; if you use Andale, Windows users won’t see it; but if you use Georgia, you can rest assured that users of both systems will see the it.

Now there’s a bit of grey area here. Users of older operating systems don’t have some of these fonts we’ve declared web-safe. For example, Windows XP users don’t have Palatino or Trebuchet MS. Even worse, users of Android mobile phones don’t have any of these fonts.

So to be clear, there are only five fonts that are considered universal:

  • Arial
  • Courier New
  • Georgia
  • Times New Roman
  • Verdana

Feel free to use these fonts all you want! Even if you dug up that old Packard Bell you had back in 1997 and it didn’t explode when connected to the modern web, you’d be able to see these fonts rendered as intended. Those Android users will just have to fight for themselves.

So, what happens when the font fails?

Your text will still be visible, but the browser will use whatever default font it supplies for situations like this. This means that you may have intended to use a cute, scripty font, but what you get is

Your text typed in a regular serif font.

This is good because your content still goes through, but your design might be compromised. Therefore, you should always specify fallback fonts and a category that the font falls into. Let’s say that you want to use Helvetica, but you’ll settle for Arial. Since both of these fonts are considered to be sans-serif fonts, you can write a CSS declaration like this:

{ font-family: Helvetica, Arial, sans-serif; }

The browser will first try to use Helvetica, and if it’s not installed, it’ll attempt to use Arial. If even that font is not available, it’ll use whatever default sans-serif font the browser likes, but at least it’ll be the correct type of font!

For more information about coding fallbacks, alternative methods to using non-web-safe fonts, and everything typography related, you can pick up a copy of our Web Typography Handbook. It’ll tell you everything you need to know.