Web Design: Use Cufon For Text Replacement

Pete Prestipino — Tue, 28 Apr 2009 00:13:00 GMT

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.

Use Any Darn Font You Want FLIR

Pete Prestipino — Tue, 17 Mar 2009 14:45:00 GMT

Do you remember that designer who told you there was simply no way you could use Calibri as the font for your website? Well, he was wrong. Using FLIR - Facelift Image Replacement (or FLIR), an alternative to sIFR that does not require Flash - you can use any darn font you wish. Quick side note - one of the most popular (highest trafficked) posts in November of 2008 was on Web design package CoffeeCup's Web Typography Pack which includes a sIFR Font Maker.

Getting started with FLIR takes just a few minutes. Download, unzip and upload, then choose and configure your fonts. Make the necessary modifications to CSS declarations and selectors and you're pretty much good to go. FLIR is probably best used for making modifications to headlines, subheads, etc. and not as the actual body copy itself.

Designers/developers will need Web servers with PHP and the GD library. There are some issues, but minor ones. The PHP GD library does not render details very well, but FLIR is easier to implement sIFR and does not require Flash to create or view.

Solutions like sIFR and FLIR may be tail chasing as CSS3 will support various webfonts (as do recent versions of Firefox and Safari).

__________

What's One Great Idea Worth?
Upgrade to a professional-level membership from Website Magazine and find out!

'Net Features : sIFR

Web Design: Use Cufon For Text Replacement

Use Any Darn Font You Want FLIR