Cufon is a javascript library that replaces phrase content of element (text), and replaces the characters with SVG or VML graphics – the result is nicely antialiased type that’s especially noticeable when using on large characters.

Here’s the upshot:

1. Grab a copy of the font you want to use (keep licensing issues in mind).
2. Head on over to
3. At the top of that page, click the Download button – this’ll give you the base library (cufon-yui.js).
4. Use the form on the same to convert that font into the math and javascript needed to render the characters, which will be output to you as a single .js file. [see Note 1]
5. Add both those .js files as the src attribute of script tags in your html document.
6. In a script block, you need to register which tags you want to replace using the Cufon.replace method [see Note 2]. If you want to replace all H1 tags, you’d use:

7. In another script block (it’s recommended this one be before the close of the body tag, so it fires before other scripts in the head), you need to initiate the process with the method:

That’s it – your H1 elements should now be replaced with smooth, antialiased vectors. Additional details follow.


(1) There are a ton of options but default is usually just fine – the one area to pay attention is the “Performance and File Size” option, which accepts a number value. Ideally, your font size (in pixels) should divide evenly into this number. If you’re just going to use Cufon with a single font size, use that font size for this value (24 for a 24 pixel font). If you’re going to use, say, 12, 14 and 18 pixel fonts, 480 would be good.

(2) Cufon uses available JS to grab elements by the selector passed. All browsers should support tag names retrieval (pretty much everybody has document.getElementsByTagName), and modern browsers (gecko, webkit) have querySelectorAll, so they’ll be able to get more complex selectors (‘#id .class > :first-child’), but if you want IE to be able to use complex selectors, you’ll need an engine like Sizzle (or any of the big frameworks, jQuery, Prototype, MooTools, etc).

I’ll mention there’s another method called sIFR that employs the same basic idea, but uses flash .swf files instead of vector graphics. You can check out sIFR here.

Note that you can use Cufon with custom fonts using CSS font-face (or google fonts). The method is the same. You can check out my post on CSS font-face here: