Bored of Arial and Verdana? Use Cufon...

Cufon is a cool way to render fonts that are not native to your users system. It's really handy if you want your headers to pop a bit more or for brands that use a particular font in their logo and want it used across other areas of the site.

When I first saw Cufon the frontender in me said why not just use images. Then I realised it really comes into it's own when rendering dynamic content. It would be much easier to render text and get Cufon to transform it rather than assign images that would need to be updated each time the content changed.

So what do you need to do to get up and running with Cufon? First of all download the Cufon script file from Git (the source also comes with documentation and HTML demos) - http://github.com/sorccu/cufon.

Then you need to grab your TTF font file (other fonts types are supported so check the site for more info) and generate your font script - http://cufon.shoqolate.com/generate/.

All that's left is to use the Cufon.replace method to specify the HTML element that you like to transform, for example:

Cufon.replace('#content-wrapper p.cufon-me');

I created a quick example with a free font called Cube but I did notice some cross browser issues with IE6 in particular. Make sure you include a jQuery file on your page and call $(document).ready. Without it in this example Cufon doesn't work in IE6 (you'll probably need IETester to verify that!).