Cufon vs. Webfonts

Until fairly recently, using any font on a Website other than the standard few fonts available to all Browsers and Operating Systems was difficult if not impossible. There are numerous solutions now available to get around the font limitations of which one of the current favorites is Cufon and the future favorite is certain to be Web Open Font Format (aka Webfonts).

We are very much at a crossroads in terms of new standards and abilities versus Browser capabilities; HTML5, CSS3 and widespread Webfonts use are a certainty in the near future but not all Internet Browsers currently support these standards. So, as far as non-custom Fonts on webpages are concerned, in order to selecte whether to use Cufon or Webfonts it is necessary to understand each a bit better:

Cufon

‘Cufon is a javascript text replacement that basically takes a font, renders EACH character in the replaced string with it’s color, size, and weight information, and then puts it out where the replaced text area was’. What this means is that each character is recreated by Cufon piece by piece. Cufon relies on Javascript therefore any Browser not running Javascript won’t be able to render the Cufon fonts.There is also often a slight (but noticeable) delay in the Cufon fonts being rendered on the Webpage; until the Cufon fonts are shown a Web safe font is shown (there are ways of reducing the Cufon delay such as loading the Javascript in the header of the Page, caching etc. but all of these don’t eliminate the noticeable delay). Cufon’s biggest advantage is that virtually any font can be shown in almost all modern browsers. A significant disadvantage however is the slow loading time.

Webfonts

The major browsers have realised that a far greater selection of fonts are required to be displayed on Webpages besides the standard few web safe fonts. The problem of trying to include tens of thousands of different font possibilities and keep them updated has been addressed by The Web Open Font Format;  how this widely supported ‘standard’ works is that a link to where the font may be found is included in the CSS. If using this font for the first time the Browser downloads and stores the font so that it needn’t be downloaded again when another Webpage uses the same font. This means that only the required fonts are stored but at the same time any font can be used on a Webpage. Webfonts are way faster than Cufon but many Browsers don’t as yet support webfonts. For Browsers that don’t support webfonts, a web safe font is shown in place of the Web font.
So, should one use Webfonts or Cufon for non Web safe fonts? My recommendation is to use Webfonts wherever possible however, when the required fonts can’t be found as a Webfont then use Cufon!

P.S. If you want to use Cufon or Webfonts with your WordPress Website, there are a number of Plugins available. Just search