FLIR: Facelift Image Replacement

One of the most frustrating parts of designing for the web versus print is the limitation of font choices. There are only a handful of fonts you can use that every visitor is guaranteed to have if you want to keep the text selectable. In print design, you don't have that unique problem - Just do your layout and send it to production or generate a PDF and all is well.

The alternative, of course, is to make images for each headline or block of text that you want to have in a typeface and insert them into your webpage. Ordinarily, that works well enough.

However, I've been doing more sites that use database-driven content management systems and incorporate a lot of user-generated or dynamic content. How do you retain that font styling when you aren't the one making the content?

I found a couple projects to fill this void: One named Facelift Image Replacement (FLIR) and one named sIFR.

Basically they both do the same thing - Replace text in HTML tags with images using whatever font you like on the fly. sIFR uses Flash and FLIR uses images. I'm leaning towards FLIR merely for the ease of implementation and the fact that you don't need a plugin for your browser to view it. The downside is there can be a slight pause in loading the replacement image, but the benefit is custom fonts anywhere automatically.

I'm using it on a site I'm doing for an illustrator in California. I'll post the link when I'm done but in the mean time, check out the examples on the FLIR site - http://facelift.mawhorter.net/