Font Replacement Using Cufón

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.

View Demo

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.

copy<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.

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

View Demo

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?

---------------------------------
Example
---------------------------------
<script type="text/javascript" src="/xyz/sites/all/themes/paydayok_theme/js/cufon-yui.js"></script>
<script src="/safeloans/safeloans/sites/all/themes/paydayok_theme/js/cufon-replace.js" type="text/javascript"></script>
<script type="text/javascript" src="/xyz/sites/all/themes/paydayok_theme/js/Covered_By_Your_Grace_400.font.js"></script>
---------------------------------------------
cufon-replace.js
---------------------------------------------
Cufon.replace('h1, .view-testimonial-block_1, #cufon-area h3');
Cufon.replace('h1, h1#page-title', { fontFamily: 'Covered By Your Grace' });
Cufon.replace('h1 span,#news label', { fontFamily: 'Covered By Your Grace' });
Cufon.replace('ul.starlist li a,#content a.more,#news .button,.gallery, #header .nav a', { fontFamily: 'Covered By Your Grace',hover:true});