PHP Tutorial – How To Use Any Font You Wish With FLIR

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.

Source: net.tutsplus.com

you may also like:

• PHP Tutorial – Working with checkboxes and a database
  Introduction Over in the php help forum, the question of how to deal with checkboxes arises pretty often. Usually, people want to be able to select which rows of a database to update/delete/throw out...
• PHP Tutorials – How to use a Fan Gate on your Iframe Tab to Hide Content until Someone ‘Likes’ Your Facebook Fan Page
  With how rapidly Facebook changes the way things look and operate, we have been doing the same when designing for Facebook. The February tutorial explains how to use a Fan Gate to reveal specific cont...
• PHP Tutorial – How to Create a Custom Facebook IFrame Tab
  Now that no new FBML Facebook tabs are able to be created, Facebook users must now use the IFrame method in order to add custom tabs to their Facebook Fan Page. IFrame tabs are definitely a bit more c...
• PHP Tutorial – Banner Rotator
  In this tutorial we'll be creating a php banner rotator. What this basicly will be is a script that uses banners stored inside of a database table and shows a random one and this way creates a rotatio...
• PHP Tutorial – Guestbook
  This is a beginner tutorial, but it is assumed that you already know some HTML and CSS. The tutorial will, kind of describe and explain my workflow in creating a guest book application. I will also ex...