Typography Solutions – Flir and sIFR | An Exclusive Place for Developers and Designers

Typography Solutions – Flir and sIFR

On 12.26.09, In PHP, by admin

Basic Information about FLIR

Facelift Image Replacement or FLIR has been build because the author Cory Mawhorter got tired with the basic Arial and Times New Roman (who doesn’t?), and he didn’t like the way sIFR was solving this problem.

So he decided to develop an alternative called FLIR. It works with JavaScript, PHP and CSS, and doesn’t use Flash at all.

How does FLIR work?

When you have installed FLIR on your website and your visitor loads a webpage, your browser detects the JavaScript file. The text that is identified as “FLIR” text get send to your PHP server which will generate images with the fonts you specified. The original text will remain in the source and that makes FLIR search engine friendly.

This whole process is faster than sIFR and your visitors will not notice anything.

What if Javascript isn’t supported?

If Javascript isn’t supported the browser will simply return normal browser text and therefore FLIR is a very accessible technique that works anywhere.

FLIR Installation

When I was researching this technique I found out it is very easy to install FLIR to your website. We will install FLIR via 4 easy-to-follow steps:

Download the files
Configuring
Add to the website
Styling

1. Download the files

The first things you need are the files to make everything work. We need to download the latest version of FLIR files from the official download page. The version I use in this tutorial is 1.2.

2. Configuring

We need to configure the config-flir.php file to define the fonts we would like to use. Open the file and find the following lines:

}<?php
// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['illuminating']     = 'ArtOfIlluminating.ttf';
$fonts['okolaks']     = 'okolaksBold.ttf';
$fonts['wanta']         = 'wanta_091.ttf'; ?>

If you would like to add ‘arial’ for example, you need to copy the arial.tff file to the fonts folder. Next you need to add the following lines of codes:

<?php $fonts['arial']         = 'arial.ttf'; ?>

Add as many fonts as you need on your site. There are more options that you can change but remember everything you do could have consequences for the output.

3. Add to the website

Once you have saved the config-flir.php file you are ready to implant FLIR in your website.

Add this line of codes between your <head> tags and after your stylesheet(s).

<script src="/path-to-flir/js/flir.js" type="text/javascript"></script>

Next, you need to find the </body> tag and you should add these codes before this tag.

 <script type="text/javascript">// <![CDATA[
         FLIR.init( { path: '/path-to-flir/' } ); FLIR.replace();
// ]]></script>

These steps are important and if you don’t do it exactly like this, FLIR will not work correctly.

4. Styling

By default FLIR styles h1 to h5, but you could add more elements to this list. For example, you may want to style strong or em elements, or others. You can do that in this way:

Find the FLIR.replace(); attribute you’ve just added before the </body> tag. You can edit that attribute like this:

FLIR.replace( 'h2', new FLIRStyle({ cFont:'some font' }) )
FLIR.replace( 'div#entries h3', new FLIRStyle({ cFont:'some font' }) )

As you can see, you can add multiple elements to this list and give them a specific font.

If you would like to specify a default font, you can do it with the other FLIR function you’ve added before called FLIR.init();

<script type="text/javascript"><!--
FLIR.init( { path: '/path-to-flir/' }, new FLIRStyle({ cFont:'your font'
}) );
// --></script>

CSS

Styling the elements you have included in the FLIR.auto(); is very easy and can be done with normal CSS.

h1#permalink{
font-family: 'your custom font', Arial, Helvetica, sans-serif;
}

You should replace your custom font with a font you have added in step 2, in the flir-config.php. FLIR should be working fine now.

Other CSS styles

There is more. You can style your FLIR images exactly how you can style your browser text. For example:

h1#permalink{
font-family: 'your custom font', Arial, Helvetica, sans-serif;
font-size:30px; /* All font-sizes are supported */
color:#ccc;
text-align:center;
}

Tips & Tricks

The basic installation is finished, FLIR should be working correctly right now. Here are some links related to FLIR that might interest you as well.

sIFR vs FLIR?

After testing and documenting both techniques I came to the conclusion they are both awesome alternatives to the default CSS typography. FLIR loads fast on your website and has a very easy implantation process, while sIFR uses Flash and has a more advanced installation method.

I would recommend choosing FLIR, because the ease of implantation and loading time compared to sIFR.

What The Author Has To Say

Because I am absolutely no expert in FLIR or Javascript, I wasn’t sure if I’ve covered everything FLIR can do, so I emailed the author Cory Mawhorter and he gave me some tips to improve the tutorial. He also wanted to respond to a couple of comments that have been made about the issues FLIR might have.

Scalability
You can use the the RefreshImages plugin included with FLIR to actually do a better job than sIFR at resizing text. Any browser that actually changes the font size when you zoom will be detected and the image updated. If the element is set to wrap, this will also be detected. So if you resize the browser window, the elements will wrap properly instead of travel off the
page.

Selectability
It is true FLIR lacks a bit in this department. I see it more as a browser drawback, though. Copying works as expected in FF but not in other browsers. In FF, when you select and copy a replaced image the ALT text is grabbed, which gives you the desired result and actually allows you to copy blocks of text. (In sIFR, you cannot copy the header that is replaced and
also the paragraph below it.)

Also, since FLIR was built with plugins in mind you could write a plugin to handle the copying and pasting. I plan on eventually doing this but haven’t yet.

Kerning Issues
The issue with the “I” isn’t a kerning issue but is actually a problem with PHP and GD and the way it handles alpha transparency with font glyphs. There are already multiple workarounds available that I have not implemented on my own site (which is why it is still like that). They include, simply changing the output from PNG to GIF or using the FancyFonts plugin, if you need to maintain transparency.

To output GIF: FLIRStyle({ output:’gif’ })
To use FancyFonts: FLIRStyle({ mode:’fancyfonts’ })