Don’t get me wrong, I really do love sIFR, I still remember the first time I heard about it, all the possibilities this gave us and how “easy” it was to setup.

But over the time I found it being a pain to setup, open flash, embed the missing characters (I work primarly in french, so I need all those accents). Then setup the sIFR in your page, making sure the text wrap properly. And I won’t talk about the flicker that happen once the page is loaded and the fonts are replaced with sIFR.

Well today I came across what might kill sIFR soon (for me at least), it’s called Facelift Image Replacement (or FLIR, pronounced fleer), it’s purpose is exactly the same as sIFR, except this technology rely on php and javascript to work his magic.

What makes it better than sIFR? Well it’s a lot easier to setup, I had some problems at first, but they were related to the server not parsing json properly. All you have to do is copy your font in the font folder, add it in the font library and use it in your CSS the same way you would define any other fonts. Here an example of how you define the font properties:
h1 {
font-family: dido,Arial,Helvetica,sans-serif;
font-size:20px;
width: 200px;
line-height: 15px;
}

There are some problems tho, and that’s why I won’t use it on big scale projects for now. First, line-height doesn’t seem to work with all the fonts, why? I have no idea. Second, some fonts renders werdly, parts are being cut off for no apparent reasons.

Until those are fixed I won’t use on big projects, unless I’m sure I won’t need to play with the line-height and my font show up properly.

Ever used it?