Cufon: Using custom fonts on the web with Cufon

Thanks to Cufon when a designer gives you an amazing design and you see a custom font you don’t have to cringe. With a few simple steps you can have a custom font on your site and have that cross browser compatible (including IE6!)

To get it working there are 3 basic steps

  1. Include cufon-yui.js (you can get the latest from http://cufon.shoqolate.com)
  2. Include a custom font javascript file, just upload the font you want to use to the generator on http://cufon.shoqolate.com and you’ll be given a javascript file that represents the font
  3. Initialise cufon to replace given elements of the page such as H1, H2, H3 etc.

You can style cufon to have drop shadows, inner glows, gradients, hover effects and more (for more info on styling, see https://github.com/sorccu/cufon/wiki/Styling)

The great thing about cufon is that it uses HTML5 Canvas to create the font’s, whereas alternatives use Flash or Images which just aren’t as friendly.

Check it out for yourself