Using Cufon

Here's how to get started with Cufon fast:

Step 1: Go to the Cufon generator at: http://cufon.shoqolate.com/generate/ Fill out the form and hit the "Lets do This!" button. You will have to choose a font off your disk. Typically your fonts will be under Windows>Fonts on a PC however Windows does not allow you to open a font file from the dialog box so you need to copy the font that you want to another directory (Don't just drag the file, press Control key to make a second copy).

Step 2: The generator will produce a javascript file (My filename was Eras_Light_ITC_400.font for the Eras Light fontface) Save this file, and also download the Cufon javascript library, which you can get by hitting the "Download" button at the top of the page.

When you click the button, it'll load the Javascript into your browser window. From the File menu on your browser, just hit File>Save As. cufon-yi.js is your second Javascript file.

Step 3: Upload both of the javascript files to your web server. You might want to create a subdirectory called js.

Step 4: In your HTML, link in both files, like this:

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/vegur_400.font.js"></script>

Step 5: Next, you need to tell Cufon which text you want it to replace. You do this through a selector that you pass to the Cufon replace method. For example, you can replace all h2 headers like this:

<script type="text/javascript">
  Cufon.replace('h2');
</script>

That's a simple example, but the string you pass to Cufon.replace() can be a more complex selector.

Step 6: If you notice your text jumping around, you might want to look at this post about stopping the Cufon Flash of Unstyled Content.

We also have this Cufon related post in the archives.