New Wave Text Replacement With Cufon
Cufon is a new strategy for in-browser text replacement, similar in approach to sIFR but requiring no images or Flash. It renders the fonts into client browsers using Canvas and VML and is insanely easy to set up and use. Basically, this means that designers can now use their favorite font when building web properties, even if the users browsing that site don't have the font installed. This was possible before, with sIFR, but the big difference now is that it's easy.
I've always been intrigued by sIFR, which has been the real poster child of the text replacement movement for awhile, but in practice it's just a bit clunky and far too difficult to get working. Fortunately Cufon simplifies usage dramatically, and actually makes me believe that text replacement might not only become practical but actually commonplace at some point, at least for a certain class of sites and user experiences.
So here's how it works: first, you visit the Cufon generator and specify a TTF, OTF or PFB format font that you want to use (you can also run your own generator, source is available on GitHub). The generator will produce a JavaScript file for you that includes the font in JSON.
Next, grab the Cufon JavaScript rendering engine itself -- available here -- and add both scripts to the HTML source of the page you want to use them in. Once you've done that you can simply use the Cufon.replace JavaScript method to instruct Cufon to replace particular blocks of text with the chosen font. I've tossed together a quick example if you want to take a look (using Myriad Pro and Droid Sans Mono to demonstrate). It took only moments to put together.
The example page should render fine in IE 6, 7, 8, Firefox 1.5+, Safari 3+, and a host of other modern browsers including Chrome and Opera. Interestingly, the Cufon rendering engine is actually two separate rendering engines -- one uses VML for fast rendering in Internet Explorer, and the other works with the widely support HTML5 canvas tag. The result is fast font replacement in pretty much all major browsers.
Cufon also supports most CSS text properties, and plays nicely with the major JavaScript libraries such as jQuery and Prototype, so you can actually apply Cufon fonts selectively using jQuery selectors! All in all I've got to say that I'm pretty impressed. It's certainly gotten me interested again in something I'd at one point written off as overcomplicated and impractical. Keep your eye on it by following the project on GitHub.

