Cufón’s font generator converts fonts to SVG font then to VML paths then finally into JSON with JavaScript functions. Cufón renders VML shapes for IE which natively supports VML, and another render engine use HTML5 <canvas> element. While it might sound very complicated, the font generator is fully automated  and it has been prove that the performance of the renderer is very fast.

Now let’s see how you could get it running in just a few minutes.

Step 1 - Download Cufón

Step 2 - Generate a font

If you want your replaced font displays as bold or italic, you need to upload separate files for them.

Choosing all available glyphs is highly unrecommended, we found the combination of Uppercase + Lowercase + Numerals + Punctuation + Wordpress punctuation does most of the jobs. If you are unsure you can always start from the minimal combination and add more glyphs if problem occurs.

The rest options are fine on default. Make sure you agree with the laws and the terms then you’re good to submit the form and download. Simply repeat step 2 for other fonts that you want to use.

Step 3 - Prepare your HTML and replace text

Make sure your cufón-enabled pages are UTF-8 or US-ASCII encoded.

Add the main Cufón and the font JavaScript files into the HTML HEAD section.

Call the magic “replace” method. For example, we want to replace all the <h1> headings.

If you’re using some JavaScript frameworks such as jQuery or mootools, make sure you include the framework before Cufón and the elements selectors such as #header h1:first-child will work in the replace function.

You can use multiple fonts by specifying the fontFamily attribute with the font name you entered in Step 2.

Now it should work for Chrome, FireFox, Safari and Opera, however there is still one little tweak for Internet Explorer. Call Cufon.now() right before the closing </body> tag and Google Analytics or any other external scripts.

Complete

Yes, that’s it. Your HTML should look something like below.