An alternative to sIFR: FaceLift Image Replacement

Dind’t you have enough of Arial and Times New Roman and Verdana? Or maybe Tahoma as well? Well ME and some other briliant guys sure did have enough so the universe have given us sIFR. This sIFR thingie is an inline flash text replacement tool for web pages, so you can use any font-face you like for Headings and subheadings, or even content. This is pretty useful, but for people who don’t want to use FLASH on their website, the “other brilliant guys” have created FLIR – Facelift Image Replacement.

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers to (h1, h2, etc.) to span elements and everything in between!

This basically gives us the opportunity to spice up our designs and websites with any font we like, so GOOD BYE font limitations!

Besides the great tool FLIR is, it has a wide area of configuration and it is compatible with common Javascript Frameworks like jQuery or Mootools.

The requirements for using this tool on your website are pretty common, so anyone can install it and start using it in a very short time. FLIR needs PHP and GD (with FreeType enabled, and PNG support). PHP5 is recommended but PHP4 should work. A newer version of ImageMagick is required for the FancyFonts and QuickEffects plugins — something around 6.3+.

The steps for using FLIR are simple:

1. Download FaceLift
2. Costumize the Config file – the variables and options are explained at FLIR’s documentation.
3. Add to your website

DONE!

You can view samples of the use of  FLIR at their Examples section and if you are not convinced of the power of this tool they have provided us with a Facelift Preview service which enables you to type in your or any website’s address and you can preview website with the headings replaced by FLIR.

• The SEO series: HTML Header – SEO & usability
• Sleek Admin – a clean admin skin for your backend
• 20 Quality examples of high contrast in web design
• How to achieve the new and trendy letterpress effect with Photoshop
• How to get peace between designers and web developers by using Firebug?