Cufon is a way to replace text in HTML with a Canvas element or a VML, so that the type is rendered in a custom font, which may not be installed on the user’s system. Yes, this sound similar to the popular sIRF, but does not use Flash. Here are my first hands-on experiences and why I am whole-heartedly excited about it:

How it works

The first step is to upload a font file (.oft, .ttf and .pfb are supported). The “generator” is then converting the font vector info into a javascript file, which you download when ready. That takes a few seconds. In my tests I got file sizes of around 40 kbyte.

Then you need to download and link the Cufon main javascript in your HTML page head, as well as the created font.js. To enable the replacement of specific text portions of the page, you also need to put in one script line, like

    <script type="text/javascript" charset="utf-8">
        Cufon.replace(h1);
    </script>

to replace the font in all h1-headlines on the page. That’s it. When the page is viewed in a browser, the Cufon script is loaded, gets the font data file and renders all the text bits. If the browser is capable of the rather new HTML5 addition, it uses Canvas elements to draw the type. It generates one element for every word, so that longer text lines still wrap as usual. Internet Explorer is not yet capable of the canvas element, so in this browser a VML is used instead.

Pros and minor cons

This rendering (in my tests at least) is blazingly fast. I could hardly notice that something is replaced on the screen. The rendering is nearly perfect, looking crisp and with proper spacing. For really big type I needed to increase the scale setting, which is reduced to enhance file size. Then I could blow the letters up to epic proportions.

The best part perhaps is that Cufon is so easily implemented. The font conversion takes a few seconds but putting it to work in an existing HTML document is a breeze. You do not need to set any parameters like color or file size because the script takes it all from the existing style sheets. The positioning and scaling of the canvas elements is absolutely flawless, no matter if canvases or VMLs are used.

The only downside so far: There is no Cleartype or other sub-pixel rendering used on the replaced texts. And the :hover pseudo tag is not yet supported.

Conclusion and how it is used here

In my opinion Cufon is the best solution, if you need short texts to show up in a special font in your web designs. I would even prefer it over sIFR. Cufon is now used to display the headlines on this blog in Anivers a wonderful free font by Jos Buivenga

Go ahead

• Downloads and font.js generator: http://cufon.shoqolate.com

• Documentation and usage: http://wiki.github.com/sorccu/cufon