Style Fonts with Cufon Font Replacement

Cufon is a text replacement javascript library. It is unrelated to sIFR in codebase, but accomplishes the same thing without the need for Flash files. Setting it up takes about 5 minutes and then you don’t have to touch it again. Couldn’t be easier and it can have a big impact on the way your website looks.

How It Works

The first step is to submit your font through the Cufon website. They process the font into an SVG(scalable vector graphics) font. Then the paths are acquired processed to VML(vector markup language), which greatly increases the speed of Cufon in IE. The resulting data is then encoded into JSON and passed to a Cufon defined function for processing, and that’s where the magic happens.

Cufon Examples

First up, go to the Cufon website, and submit your font file for processing. It will spit out a .js file for you to download. You have to have this file in order for Cufon to translate the text into the font of your choice.

Next, include both the cufon-yui.js file and the generated font javascript file. Last is just wrapping some text in a class, and initiating a Cufon replacement around that class name. Full code below:

<script src="/cufon/cufon-yui.js" type="text/javascript"></script>
<script src="/cufon/molot.cufonfonts.js" type="text/javascript"></script>

<span>This is text in the Molot font</span>

Results In:
This is text in the Molot font

Cufon Lineheight

There is a known problem with all browsers with line height that is probably not going to be fixed

It is recommended that for a better viewing experience on IE that you call the function right before the body tag. This takes care of an otherwise momentary blip that may happen as the page loads and then the font is loaded.



IE9 Problems

As of this posting, there were some problems with certain versions of IE9, I know that they were working on resolving them and hope to have a release out soon to fix these issues.

Posted by Will on June 5, 2012

Leave a Reply

Your email address will not be published. Required fields are marked *

TechJunkie Also Recommends