We all know about the big font replacement methods. sIFR’s big. Image font replacement has gained some steam. Not too many people know about a great project named Cufón though. Cufón uses a unique blend of a proprietary font generator tool and JavaScript to create a custom font renderer in canvas and VML. Here’s how to use Cufón to render the Sin City font for your headers.

Step 1: Generate the Font

The first step is to use the Cufón font-generator tool to convert and customize the way the font renders. I was very impressed with the number of options available for the font conversion. Once the conversion is done, Cufón’s generate presents you with a JavaScript file containing the font information as Cufón can read it.

Step 2: Include Cufón and the Font

Include the Cufón JavaScript file and the generated font’s JavaScript file.

<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="Sin_City_400.font.js"></script>

Step 3: Selectors and Elements

Time to select the elements to Cufón-ize. I don’t recommend using Cufón for every bit of language on the page — doing so can be resource-intensive. Generally you want to use custom fonts in headings so that’s what I’ve chosen to do below.

Cufon.replace('#cufon-area h1, #cufon-area h2, #cufon-area h3');

In my experience, Cufón looks better than both sIFR and image methods. Be sure to check out Cufón as it’s an outstanding tool and I look forward to seeing where the project goes. What are your thoughts?

Gentlemen…you’re welcome for the gratuitous Jessica Alba image.