How To Use Any Font You Wish With FLIR

Last week, Philo showed you how to implement sIFR3. This time, I’m going to show you how to implement Facelift Image Replacement (or FLIR), an alternative to sIFR that does not require Flash.

Note that the demo uses different fonts than the ones used in the tutorial for copy right reasons.

Step 1 - Setting up FLIR

The first step is to download FLIR. Unzip the download and place the folder inside (facelift-1.1.1) somewhere on your web server. I have renamed the folder to just "facelift" to make things easier.

Inside the facelift folder is a Javascript file named "flir.js". You can choose to leave it there, or you can move it elsewhere such as a centralized folder for Javascript files. For this tutorial we’ll do just that and move it to a folder called "js" in the root directory of our site.

Now open up flir.js in your favorite text editor and go to line 30. It should look something like this:

,path: ''

We need to put an absolute or relative path to our facelift directory between the two single quotes. However, relative paths are relative to the page and not to the flir.js file, which may cause some problems with sites that use mod_rewrite to make pretty URLs. The most surefire way to make everything works is to provide an absolute path.

,path: '/path/to/facelift/'

Open the page you want to add FLIR to and add the following between the head tags to attach flir.js:

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

Then add the following right before the closing body tag:

<script type="text/javascript">
	FLIR.init();
	FLIR.auto();
</script>

Step 2 - Choose and configure fonts

This step is pretty easy. Download the fonts you want to use. I’ll be using Delicious, Tallys, and Tusj. Place your fonts in the "fonts" folder inside the "facelift" folder. Open config-flir.php and you’ll find a block of code that looks something like this:

// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['tribalbenji']   = 'Tribal_Font.ttf';
$fonts['antagea']       = 'Antagea.ttf';
$fonts['illuminating']  = 'ArtOfIlluminating.ttf';
$fonts['bentham']       = 'Bentham.otf';
$fonts['geo']           = 'Geo_Oblique.otf';
$fonts['puritan']       = 'Puritan_Regular.otf';
$fonts['konstytucyja']  = 'Konstytucyja_1.ttf';
$fonts['promocyja']     = 'Promocyja.ttf';
$fonts['stunfilla']     = 'OPN_StunFillaWenkay.ttf';
$fonts['animaldings']   = 'Animal_Silhouette.ttf';

// The font will default to the following (put your most common font here).
$fonts['default']       = $fonts['puritan'];

As you can probably tell from the comments, each entry in the $fonts array is a font in the fonts folder. The array key between the brackets is what we use in our CSS declarations when we want to use the font. Let’s add the fonts we downloaded earlier.

$fonts['ffftusj'] = 'FFF Tusj.ttf';
$fonts['deliciousheavy'] = 'Delicious-Heavy.otf';
$fonts['tallys'] = 'Tallys_15.otf';

Whatever is assigned to $fonts['default'] will be used if a font is not specified. Let’s make Delicious Heavy the default.

$fonts['default'] = $fonts['deliciousheavy'];

There are a number of other settings in the config-flir.php file but they can be left alone. What each setting does is fairly self-explanatory and there are comments if you want to tweak them.

Step 3 - Styling

By default FLIR will do image replacements for only headings. You can specify what should be replaced by passing an array of CSS selectors to the FLIR.auto() function we added in step 1.

FLIR.auto([ 'h1', 'h2', 'h3.alert', 'strong#important' ]);

This will tell FLIR to apply the image replacement to h1 tags, h2 tags, h3 tags with a class of "alert", and strong tags with an id of "important".

Now all we have to do is apply CSS styles like normal. Use the keys of the $fonts array as the font in your CSS declaration to use that font. Lets apply Tusj to all h1 tas, Delicious Heavy to all h2 tags, and Tallys to all h3 tags with a class of alert.

h1 { font-family: ffftusj, Georgia, serif; }
h2 { font-family: deliciousheavy, Arial, sans-serif; }
h3.alert { font-family: tallys, Arial, sans-serif; }

That’s it! The strong tags with an id of "important" will fall back on the default font we specified in the config-flir.php, which in this case is Delicious Heavy. The generated image text will scale to whatever font size that is specified in the CSS. CSS colors will also carry through but text transformations will not.

Pros and cons of FLIR

Although FLIR is a pretty neat solution to text image replacement, there are a few minor problems. The PHP GD library does not render the fine details very well which is pretty noticeable in the Tusj font. The top text was rendered in Photoshop and the bottom text was rendered by the PHP GD library used by FLIR.

Another con of FLIR is that it requires a web server with PHP and the GD library. However, most hosts have both so this is negligible.

A benefit of FLIR over sIFR, its main competitor, is that it is easier to implement and does not require Flash to create or view.

Both FLIR and sIFR are excellent solutions, and will serve you well. Most visitors will be able to view both without much trouble, but for the few on the edge of the bell curve who don’t have Flash, FLIR might be a better solution.