Tired of using the same old system fonts on your website?

Have no fear, Cufon is here.

One of the major limitations in web design typography is that by default, the font you use on your website has to be available on the end users computer. There are various methods out there for font replacement but not all are cross browser and there are differences in the rendering between operating systems and browsers.

The two main methods are sIFR and Cufon. sIFR is worth mentioning as it is an alternative but it can be a pain to set up and for the purposes of this blog I will be concentrating on Cufon only.

Enough chat, let set look at an example:

Step 1
You will need to download the Cufon javascript files:
http://cufon.shoqolate.com

After browsing to the link above click on download and save the javascript file to an accessible location to your project. Personally I use a folder called scripts and this is the convention I will be using for the code example below.

Step 2
Choose a font (NB** The font EULA must allow web embedding)
There are many free sources for fonts one of which is:
http://www.1001freefonts.com/

Choose a font and download it to your desktop

Step 3
Use Cufon to create the javascript file which is neccessary to convert your font to a vector based format
http://cufon.shoqolate.com/generate/

The form will require you to upload the your font from step 2 and answer a few simple questions. Besides the license agreement, one of the most important is the glyphs/characters you would like to use from the font. I usually select upper-case, lower-case, numerals and punctuation. The more you choose, the larger the resulting javascript file will be.

After you're finished, click on the "Lets do this" button and Cufon will generate a .js file which you will need to save to your scripts folder.

Step 4
A test page...
Heres one we made earlier. Just view the source to see how it works.

Cufon demo page

Thanks to the clever folks who did the hard work, thats all is to it!