Using Cufon to replace fonts

I have just been introduced to the world of font replacement using cufon. I had come across sIFR but found it complex and difficult to implement. To be honest I had seen mentions of cufon but only in the last few days had I used it.

As with all the jQuery I have come across it is very easy to implement, in the following steps I will show you how.

1. Decide on and obtain the font you are going to use. For this example I am using Pilgi
2. Visit the following web site Cufón generator
3. Fill out all the options as required and generate your font
4. Download the Cufón script from the above site or from here
5. Add the 2 scripts to your site and link to them within your web page.
6. Once the scripts have been uploaded to your site you need to add them along with a line of code to tell the Cufon script that the DOM is ready. This is needed for Internet Explorer, yeah its IE again

Example:

1. <script type=”text/javascript”> Cufon.now();</script>
2. <script type=”text/javascript” src=”cufon.js”></script>
3. <script type=”text/javascript” src=”Pilgi_400.font.js”></script>

Rememeber that javascript files go just above the closing body tag.

Add the following script to the page depending on your choice

1. The example I am using is a span with class font to show the Cufón in action
   <script type=”text/javascript”>Cufon.replace(["span.font"]);
2. You could do something like:

<script type="text/javascript">Cufon.replace(["h1"]);></script>

This applies the Cufón to all the h1 tags on the page.

So, this is a span with a class of font, showing the Cufon in action