Cufon Font Replacement »

I recently discovered this simple script, which converts HTML heading tags to whatever font you want. There are a few other alternatives out there but this seems to do the trick quite well.

I’ve used sIFR before a number of times but found it cumbersome to style across multiple browsers. Plus the thought of using flash to modify and display HTML code doesn’t seem to make a lot of sense.

I’ve tried to avoid SIFR and I don’t like using images for headings for a variety of reasons. SIFR’s too much of a hack anyway. It’s also slow. The more you used it on a page the slower it would take to render.

I’ve played with Cufon only a couple of times but found the cool thing about it was how easy it was to convert a font to the required JS file format.

After this, you link to the main cufon.js file and converted font js file, and then add a few lines of JS code to replace the tags with the new font. Your headings are done. Too easy.

The only slight downside is that it only supports tags (as of writing this). E.g h1, h2. It’s no big deal really as I’m a strong believer in using web supported text for basically everything. It’s quicker and well supported across multiple devices and browsers and customisable.

Anyway, try it yourself.