Use Any Font in HTML with better control

Step 1: Download Cufón

Visit Cufón’s website and right-click on the “Download” button at the top. Choose “Save-As” and place it on your desktop.

Step 2: Convert a Font

In order to function, we need to use the font converter utility on the website. Alternatively, you may download the source code and convert your fonts locally. For the purposes of demonstration, I’ve chosen to use an obnoxious font: “Jokerman”. Note – Windows users: you may have to copy the font from your “FONT” folder to the desktop for this to work.
If desired, also upload the italic and bold files as well.

Step 2b

Next, you’ll need to choose which glyphs should be included. Don’t be so quick to simply “CHOOSE ALL”. Doing so will cause the JS file size to increase dramatically. For example, we probably don’t need all of the Latin glyphs; so make sure they are left unchecked. In my case, I’ve checked the ones you see below.

Step 2c

Cufón allows you to designate a specific url for your file, to increase security. It’s extremely important that you ensure that you have the proper privileges to use a font. REFER HERE to review the terms. If advantageous, type in your site’s url into this box.
Since we’re just getting started, you can leave the final two sections at their default values. Accept the terms, and click “Let’s Do This”. You’ll then be presented with a download box asking you where to save the generated script. Once again, save it to your desktop for easy retrieval.

Step 3

The next step is to prepare our project. Create a new folder on your desktop, add an index.html file, and drag your two Javascript files in.
Open the index file in your favorite code editor, add the basic HTML tags, and then reference your two Javascript files just before the closing body tag (you’re free to add them to the head section as well). 

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

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

Calling the Script

Now, we need to decide what text should be replaced. Since our document is still blank, feel free to litter it with random tags and text. Let’s try to replace the default font in all the H1 tags with Jokerman.

1. <script type="text/javascript">  
2.     Cufon.replace('h1');  
3. </script>  

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

When we call the “replace” method, we may append a string containing the tag name that we wish to replace – in our case, all H1 tags. Save the file, and view it in your browser.

Step 3b

As always, IE needs a bit more to play nicely with the others. If you view this page in IE, you’ll notice a slight flickr/delay before the font is rendered. To remedy, simply append:

1. <script type="text/javascript"> Cufon.now(); </script>  

<script type="text/javascript"> Cufon.now(); </script>

Step 4

Let’s imagine that you want to have more control over your selector. For instance, perhaps you don’t want to change ALL the H1 tags, but merely the ones within the header of your document. Cufón doesn’t have its own selector engine built in. This feature was omitted to keep the file size as small as possible. Though this might seem like a downfall at first, it’s actually a great idea. Considering the ubiquity of Javascript frameworks lately, there is no need to double-up. We’ll review two methods to target specific elements.

Method 1: Javascript

If you won’t be using a JS framework in your project, we’ll simply use:

1. Cufon.replace(document.getElementById('header').getElementsByTagName('h1'));  

Cufon.replace(document.getElementById('header').getElementsByTagName('h1'));

The code above states, “Get the element which has an id of “header”. Then, find all of the H1 tags within this element, and “replace” them with our new font.

Method 2: jQuery

To piggyback off of jQuery’s selector engine, we only need to import jQuery before Cufón.

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
2. <script type="text/javascript" src="js/cufon-yui.js"></script>  
3. <script type="text/javascript" src="js/Jokerman_400.font.js"></script>  

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Jokerman_400.font.js"></script>

1. Cufon.replace('#header h1');  

Cufon.replace('#header h1');

It’s as simple as that! Please note that you MUST import jQuery BEFORE your Cufón script in order for this method to work.