Website Font Replacement Options Comparison

The Website Typography Battle

It turns out there is a battle raging on the best way to display fonts on websites.

Most website owners today can choose from about 10 fonts. A lot of work has been done in the past decade to give website designers, developers, and branding folks a way to display any font they want.

There is still no clear winner, but we’re getting closer.

If you’re looking to go beyond the basic web fonts, here are the options I’m aware of today (condensed version):

1. sIFR

Is difficult to implement and takes very specialized knowledge to customize.

• Uses Flash, JavaScript, and CSS.
• Hosts the font on your server, usually.
• Works on IE5+, Firefox, Opera, Safari.

2. FontBurner, other font replacement services

Takes care of the Flash conversion part for you, which is the main benefit.  Less customizable and can be a bit hacky.

• Uses the same as sIFR.
• Hosts the fonts on your server or theirs.
• Works on IE6+, Firefox, Opera, Safari.

3. Cufon

Uses an easy online font generator for any font you want. The process is easy to implement and is CSS customizable. You may see some ‘flashing’ when the replacement loads, but there are work-arounds for this.

• Uses VML, JavaScript, and CSS.
• Hosts the font on your server, usually.
• Works on IE6+ (not yet IE9 beta though), Firefox, Opera, Safari.

4. Google Fonts, Typekit (paid service), and formerly Font Face

Is very simple to implement and is CSS customizable. You may see some ‘flashing’ when the replacement loads, but there are work-arounds for this.

• Uses JavaScript and CSS.
• Hosts the font on the service’s servers.
• Many of these have CMS plugins, like the Google Fonts WordPress plugin

5. @font-face

Is very simple to implement and totally customizable. For instance, there are 9 font-weights available instead of just normal and bold. Google has a font-repository that works with it.

• Uses CSS only, and is a W3C standard for CSS3. This is huge because it means eventually all browsers will support it and it doesn’t take any external coding whatsoever.
• Hosts font wherever you want.
• Works on IE5.5+ (but only with their proprietary font type), Firefox 3.5+, Opera 10+, Safari 3.1. (see a good implementation tutorial here)

Regardless of the way you implement it, you need to own the license to use any font you choose. Some fonts are free, some are licensed for print-only, etc. So whatever font you use, you need to know if you have the right to use it on a website.

I recommend option 3, Cufon, or option 4, Google Fonts. They are supported by older browsers and have plenty of free options.

I believe that option 5, @font-face will be the best in future, but not until most people have upgraded their browsers, which will be at least a few years. @font-face allows use of your own fonts or a font repository like Google fonts.

Because licensing issues can be hard to wrangle, I recommend selecting a free font if possible. Some sources for free fonts are:

• Google (34): http://code.google.com/webfonts
• Font Squirel (100’s): http://www.fontsquirrel.com/
• Font Face (100’s):  http://www.fontface.com/
• 1001 Free Fonts (100’s): http://www.1001freefonts.com/

Further resources:

A very well-done, in-depth comparison on Smashing Magazine on many more methods can be seen here.

Please let me know if there’s anything you would add to this.