Cufón Font Replacement - The Good and The Bad
Erik Olson, Former Viget
Article Category:
Posted on
As soon as designers got ahold of the web as a design medium (probably about 15 years ago), they were thinking about fonts, right? (It was at least in the top five on the "first things to think about" list). So, in an age where tens of thousands of fonts have been invented, why are we mostly still using the same six?
Techniques like image replacement and sIFR have done us well. They remain the strongholds until something better comes along -- which may have just happened: namely, I'm talking about Cufón by Simo Kinnunen.
Cufón (I'm pronouncing it "koo-fon") is a font-replacement technique that uses javascript and vector graphics to write fonts from a font file (TTF, OTF or PFB) to your browser. It's easier/safer to use than sIFR and lighter on size than image replacement, but has the same copyright issues as both.
What Does Cufón Do?
The way Cufón works is pretty smart and highly technical. A proprietary javascript rendering engine takes your font file and converts it to a vector form. From there, it's translated to VML (Vector Markup Language). The result? Essentially, the font outline is written as JSON and converted into lots of numbers that define every curve and angle of its shape. The html5 canvas element is used to display the font in most browsers while VML is used in Internet Explorer (kudos to IE who has supported VML since IE5.5. VML is a very fast way to display vector graphics).
What's Good About It?
Ease of Use. The process involves uploading your font file to the script generator and adding the resulting file to your page, then adding the rendering engine script to your page. The final step is calling Cufon.replace javascript method for the particular text you want to replace. Those of you who have experience with sIFR know that while it provides for any font you need, it's tough to set up. I think I had the Cufón set up in about 5 minutes with no problems (and I'm not that bright).
File Size. Once the rendering and compressing is all said and done, the font size is about 60-80 percent less than the original.
Fully Supported. It's not Flash, so there's no need for the plug-in. And it is fully compatible in all major browsers.
It's also light on the browser. Click here to turn on Cufón in this section.
What's Bad About It?
Not Selectable. When the font is displayed it's rendered as a bunch of elements broken up by word. This is a serious limitation because Cufón text is not selectable(try it if you converted the text above). Personally, I often find myself wanting to select many things that look like text but isn't like images and flash content that isn't properly enabled to be selectable(selectable content in Flash SHOULD be the default setting people!). This will be a consistent point of frustration.
UPDATE: Within minutes of publishing this post I was shown by a few people that it is possible to select Cufón text. Here's the way Cufón works. The javascript file breaks up the html text you want to replace with Cufón by word and wraps each word in a span tag. It adds a class to the span that sets the height and width to "0" so it appears as though the text is not visible but in reality is still there as far as the browser is concerned. The experience isn't optimal but in IE(6-8), Safari 4, Chrome and FF3 you are still able to select the original HTML text. Although FF3 won't show you the selected text but if you select it and hit ctrl+c you will be able to paste it.
The Copyright Problem. This is the biggest issue. When generating your Cufón javascript file, you are given the option to restrict the use of your font to certain domains. I don't know whether or not this makes the font totally secure. What I do know is that it seems like it would be a tricky process, which will likely curb the majority of font stealers right there. sIFR has the same issues where it is possible to decompile the flash file and steal the font; however, people haven't been doing this. Since it hasn't been a problem with sIFR, I don't expect it to be a problem with Cufón.
Conclusion
When thinking about fonts on the web, what is the best case scenario for us? Probably the ability to embed any font directly into any browser using HTML/CSS, right? Cufón comes fairly close, but is still just a simpler hack. Cufón is certaintly not the final word on fonts on the web, but is -- at this point -- a little closer thanks to its simplicity and compactness.
