Channels ▼

Nick Plante

Dr. Dobb's Bloggers

New Wave Text Replacement With Cufon

February 27, 2009

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.

Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 


Dr. Dobb's TV