Web Design: Use Cufon For Text Replacement

Back in March we discussed how to use FLIR (Facelift Image Replacement) as one way to replace text and use any font on your website. FLIR is a great alternative to sIFR that does not require Flash, but there are some good alternatives - namely, Cufon.

Unlike sIFR (Scalable Inman Flash Replacement) Cufon requires no plugins. Cufon consists of two individual parts - a font generator (which converts fonts to a proprietary format) and a rendering engine written in Javacript.

The font generation is essentially just a web-based interface to FontForge (an outline font editor that lets designers create postscript, truetype, opentype, cid-keyed, multi-master, cff, svg and bitmap fonts, or edit existing ones, which allows for the conversion from one format to another).

The generator (check an online version here) builds a custom FontForge script based on user input and then runs it, saving the result as an SVG font. The SVG font is then parsed and SVG paths are converted to VML paths. The resulting document is then converted into JSON with a mix of functional JavaScript. The process is then repeated for the rest of the fonts given to the generator and the resulting JavaScript file is sent back to the client with a distinctive filename.