Tired of SIFR? Get a Facelift!

Fonts on the web are a vital part in branding and making your website appealing.  A lot of web developers these days have gotten tired of the Verdana, Helvetica, and Arial fonts.  So what is the alternative?  Some people have turned to SIFR (Scalable Inman Flash Replacement).  I frankly have not used it a whole lot for the reason that it is flash, which in itself is not very good for usability.  What if someone doesn’t have flash…. they can’t see the most important content on your page; the headings!!

The idea is a good one, as it prevents an individual from going into Photoshop to create their image titles, and allows the developer a lot of flexibility by just changing one flash variable.  Today I will suggest to you a better more user-friendly way of achieving those eye-catching headlines that we all want!

The solution is Facelift Image Replacement or FLIR for short.  What is nice about it is that if JavaScript is disabled, the user will still see your headlines; they just won’t quite look as snazzy.  If JavaScript is enabled it then transforms the normal text into fancy text using a font file you have stored on the server.

Below is how simple it is:

<script type="text/javascript" src="/path-to/facelift/flir.js"></script>
<script type="text/javascript">
    FLIR.init( { path: '/path-to/facelift/' } );
    FLIR.auto();
</script>

You then setup your Facelift to contain a custom font in the config-flir.php file:

$fonts = array();
$fonts['illuminating'] = 'ArtOfIlluminating.ttf';

Now, it gets even easier to apply this font to a heading. All you do is use it in CSS like you would with any other font.  You will also want to specify fall back fonts in case the user has JavaScript disabled:

h1
    {
        font-family: illuminating, Arial, Helvetica, sans-serif;
    }

It even adapts to font-size, color, and text-align CSS properties. As well its background is transparent so your text can have a CSS background image!

I encourage you to check out the FLIR website, and play around with it as it is a time saver.

Related posts:

1. sIFR: Not Compatible with CS4?
2. Animate Text with jQuery Easing (screencast)
3. What Makes A Beautifully Designed Website?
4. Unobtrusive JavaScripting
5. Reading XML Using Flash

Written by Brenley Dueck