(And why I think it should lay down and die, just as much as I think IE6 should).
Scalable Inman Flash Replacement (or sIFR), for those wondering, is a popular method for replacing plain text in a website, with custom fonts that a user may not have installed. It is typically employed in headings, or on buttons, where a custom font can add interest or “pizazz” to an otherwise mundane page.
The problem I have with it lies in its execution. Here’s why I think it is a scourge on the earth, and should be cleansed at first opportunity:
- It uses Flash. This is a bad idea for so many reasons.
- First (and most obvious), it requires the user to actually have Flash installed to see the better fonts. If they don’t have Flash installed, they don’t see the page to its full potential.
- Some power users will choose to selectively enable Flash in websites, to avoid advertisements and the like, and these users will not see your headings. Ad blockers may block your headings by default.
- Being an embedded Flash movie, it’s a completely different entity to the rest of your page. While the creators of sIFR have cleverly included the ability to select text within the Flash movie, as soon as you try to continue your selection further down the page, you find your selection frustratingly stuck inside the heading. If you begin your selection outside the heading and select over the heading, then you can copy and paste with some success, but it feels clunky and unusable.
- Did I mention it was Flash?
- If you’re placing a link against the text, you lose browser features such as being able to right-click the link (instead you get the Flash right-click menu), or middle-click to open in a new tab.
- Facelift (FLIR) is essentially the same as sIFR, but instead of replacing text with a Flash movie, it is replaced with a dynamically-generated image. Genius! (Not really, it just looks like it alongside the retardation that is sIFR). The only caveat is that you need to have the ability to run PHP scripts on your webserver, and have GD2 installed. It will even cache the images for you, so you’re not generating a new image on every page view. The only drawback I’ve seen, is that there can be a visible delay in image replacement, while the browser grabs the image files from the servers. However, after first load, these images will be cached, both on the server, and in the user’s browser.
<canvas>tag) — no backend required. This is both extremely fast, and equally as effective as the other two options.
If you have the ability to run a PHP backend, I’d suggest using Facelift (I’m a fan of the elegance of using images, which is essentially what would be used if you were to manually craft the headings yourself), otherwise Cufón is pretty great too. Whatever you do, don’t touch sIFR or Flash with a ten-foot pole!