Cufon vs sIFR

I don’t know if you noticed that there is a new font replacement method called Cufón. Cufón simply does what sIFR does. But Cufón is more exciting because, it doesn’t use any browser plugins. As you know, sIFR needs Adobe Flash plugin to work. Cufón, on the other hand just needs JavaScript to be enabled.

Let’s compare these two powerful font replacement methods.

Cufón

As I said, Cufón is based on JavaScript. It has two individual parts. First, a font generator and second, a rendering engine. This means, if your visitors disable scripts, they will not able to see the font replacement. But, they’ll see all the Cufón based texts without any problem; as normal HTML texts.

Cufón supports all mainstream browsers:

• Internet Explorer 6, 7 and 8
• Mozilla Firefox 1.5+
• Safari 3+
• Opera 9.5+
• Google Chrome

The only problem with its browser support is Safari 2 and Internet Explorer 5.5. But we all know, it is not a big deal. Also Cufón has some minor bugs.

Implementing Cufón is super easy. First you have to download cufon-yui.js. Then you have to convert your font to VML paths by using Cufón’s online generator. And last, you call cufon-yui.js and generated font .js file in your document and call Cufón function (there is a little +1 step that is calling Cufón function in the footer for IE). That’s it.

Styling Cufón is also very easy. You may style Cufón based text by using CSS.

Cufón’s JavaScript’s file size is also exciting. cufon-yui.js is 14Kb. For testing only, I used FF Mt font, free from FontFont. I converted FF Mt to JavaScript via Cufón’s generator and it took only 14Kb. So a very basic setup cost me only 2 JavaScript files: 28Kb. This also means 2 HTTP requests.

However, there is a big usability problem in Cufón. That is, users cannot select and copy the Cufón based texts. That’s a big usability issue but I think creators will do something about it. (Thanks to Hank)

sIFR 3 *

I’ve used sIFR in many projects and it really helped me to make web sites more stylish. It’s like revolutionary.

sIFR also uses JavaScript and plus it stores font files in Adobe Flash. This means you have to have Adobe Flash to create font files. Or there is an online font converter for sIFR called sIFR generator. It helps you to convert .ttf files to .swf files.

Implementing sIFR to a web page is a little bit harder than Cufón. First you need to convert your font to a .swf file. Than you have 3 files to link on your page. These are: sIFR’s CSS file, sIFR’s JavaScript and a config file. The config file is optional, you may want to put config lines to the bottom of every page. And the next step is configuring your sIFR. To style sIFR texts, you can also use CSS. But this time you need to define CSS in the config file.

Let’s check sIFR’s file sizes. Again, I used FF Mt font. It took 10Kb. Compressed sIFR.js took 29Kb. And the CSS file for it took 2Kb. That makes 41Kb. 1.5 times bigger than Cufón. sIFR needs 4 HTTP requests.

* Build r436

Conclusion

Cufón seems to be better. We all know, sIFR is older but it still eats more kilobytes and HTTP requests. Its rendering is also slower then Cufón. sIFR renders texts after the page is loaded. So these factors help Cufón to take the lead.