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 http://cufon.shoqolate.com/generate/
3. At the top of that page, click the Download button – this’ll give you the base library (cufon-yui.js).
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 Cufon.now 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: http://upshots.org/?p=187