Alternative Web Fonts

Each operating system (OS) – Mac, PC, Linux, etc – comes with its own installed fonts. The most consistently installed fonts include Arial, Georgia, Times New Roman,  Trebuchet MS, and Verdana. Even within an OS there are font differences. For example, Windows Vista and Windows 7 come with more fonts than Windows XP.

My favorite tool for checking font stacks is TypeTester. It’ll show you pre-installed OS fonts for Mac, Windows, Windows Vista, and now some available Google Fonts. It’s not perfect. It doesn’t give you Windows 7, Linux or other minor OS fonts. For example, working on a site last week, I discovered that Tahoma was bundled with Mac 10.5 OS around 2008; previous versions of Mac OS will NOT display Tahoma.

Keep in mind that usability studies show that your average website visitor cannot recognize the difference between fonts. Although they may know a sans-serif font from a serif font – visitors rarely notice subtle design details like font choice.

If you are interested in learning more about fonts, I highly recommend the captivating documentary film Helvetica. Hundreds of global companies use the “templatey” Helvetica font for their logos. The reason? It’s an awesome font that reads well. It doesn’t matter that the font is 50 years old; it has really not been improved upon.

On a lighter note, you might enjoy this great Ode to Comic Sans (NSFW).

In my experience, alternative web fonts rarely work well for websites for the following reasons:

  1. the chosen font does not scale well at larger sizes,
  2. the font does not look consistent enough between platforms or browsers,
  3. the font ‘flickers’ on page load (when the default OS font, like Arial, is loaded just before the alternative font is loaded, visitors may see a ‘blink’ before the font is replaced.), and/or
  4. the font slows down page load speed.

Alternative fonts can be helpful for rich-content sites with fewer visuals and/or weak branding. A distinguished-looking font adds some extra design flair to the otherwise flat look.

If you are still adamant about using alternative web fonts, here are my recommendations for alternative font services:

  1. FontSquirrel
  2. FontDeck
  3. Google Fonts
  4. Typekit by Adobe

If a non-standard font is required, then I prefer the @fontface method, which does not require Flash, SIFR, javascript, or any other additional technologies beyond CSS . @fontface has been around for years, but only recently gained popularity with the release of CSS3. This CSS property is supported by 80%+ of browsers, with only older browsers – early versions of Firefox and IE – not cooperating.