27 Apr, 2009
sIFR vs FLIR – Font Replacement Techniques
Web Development » CSS, Design, xHTML » sIFR vs FLIR – Font Replacement Techniques
sIFR
sIFR stands for Scalable Inman Flash Replacement and it is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents.
Pros
- Looks nice
- Does not require a server side language
- Text created with sIFR can be copied/selected
- Graceful degradation (If flash is not installed, it will just display normal text)
- Works well with screen readers
Cons
- Not easy to configure
- Not easy to make font adjustments
- Requires Flash installed on client’s browser
- Can be slow if there are too many sIFR elements on a single page
FLIR
FLIR stands for Facelift Image Replacement. FLIR uses PHP and Javascript to generate text into images with your desired font and replaces them on the fly.
Pros
- Looks nice
- Relatively easy to configure
- Does not require Flash
Cons
- Text cannot be selected/copied
- Uses a server side language (PHP) to generate images and therefore requires a server with PHP
- Requires GD library on the server
- Slow if there are too many FLIR elements on a single page
My two cents
These techniques are good alternatives to using normal image replacement techniques with CSS for websites that use CMS and require content editors to update text and headings. However, they should be used sparingly as there is always an issue with speed and bandwidth. For example, it is ok to use these techniques for headings but not for body content. After all, websites should not only look pretty, but also accessible and usable. I prefer sIFR to FLIR because although it is harder to implement, it does not require a server side language, and looks nicer. It also degrades gracefully which is an important factor in ensuring a website’s accessibility.
