sIFR could well die soon.
Aug 08
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?
#1 Aug 11 at 09:21
Have I used it? Yes sir.
I thought sIFR was interesting, but I never used it because of the setup process with supplying a swf and whatnot. Now all you need to do is drop FLIR and the font to the server, set some settings, and wham you’re off to the races. Soon as I tried FLIR once, I came to the conclusion that sIFR is in trouble.
I customized my generate.php for Drupal so no non-node titles could be generated (by fake URL request) but noticed one thing. It converts/strips certain characters from the URL like - : or ‘. I can add exceptions for them easily enough with their HTML entity equivalent in generate.php, but when I did that, I got a blank square. I am going to guess that those symbols are missing from the fonts themselves.
Anyway thats my only gripe with it currently. You couldn’t ask for a cooler script and its lightning fast on the convert too.
But yeah, with some fonts that extend below or above their given baseline, you may need to try the FancyFonts.php plugin that comes with FLIR. You also need ImageMagick for that. It’s supposed to let the fonts be drawn outside their bounds so they are not cut off.
#2 Sep 16 at 12:38
@Kevin Quillen Thanks for the FancyFont recommendation, I’ll check it out.
I’m glad to hear feedback from someone who used it. My next project will certainly use it as I currently have an hard time making sIFR behave the way I want.
I just feel like I always have to hack something to make it work properly.
#3 Sep 25 at 16:41
Man you disearve a beer !
#4 Oct 17 at 14:00
I’m also a big fan of Sifr the latest version sifr3 seems to be very stable minus a few little details.
as for Flir I’ve tested it on a couple of projects and wasn’t really convinced,
I love the fact that it relies on js and php and the set up is way simpler when compare to SIfr but some of the sites were I replaced my sifr with flir to test it out gave me some un-wanted results.
I still do want to try FLIR out and plan on using it in an up-coming project to see what i get from it.
great article Stephane.