Cufon versus SIFR

If you are an obsessive person like myself about the little things with web design, then you know exactly what I mean when dealing with dynamic titles on HTML based sites and how the limited font set of the operating system can be absolutely painful and frustrating. It might be so frustrating that you have in fact gone so far and to painstakingly create all your article titles as graphics to keep the look of what you were going for.

Then a few years ago we discovered SIFR, which is a font replacement system that uses Flash to replace the text in your page. Now as we know and love Flash for all of its rich experiences that it can offer, SIFR never seemed to really work. One of the biggest problems was its inability to handle multiple lines of long text as titles, it would do strange things like resize the text to fit in a box and other odd behavior. We didn’t have much of an option back then and so painfully attempted to tweak SIFR to make it do what we needed. In the end, we gave up with the custom fonts because it wasn’t worth the effort… until now.

We stumbled upon Cufon a few months ago, as an alternative font replacement solution that takes the font of your dreams, converts it to outlines and defines those outlines through Javascript. The javascript definition file is then rendered to the page with SVG and viola you have custom fonts on your site with no need for Flash or images.

Now here is the amazing part, it works in IE5.5 and on my iPhone as well! Pretty amazing stuff. You can see an example of Cufon in action on this site and from now on in, every site we will ever make. It’s simple to execute with a simple class definition in your style sheet and makes for a beautiful result that is fast to render. It’s an important tool for every web designer so add it to yours, you’ll be happy you did.