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">

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 function we added in step 1.[ '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.

Photoshop vs 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.

Related Posts
  • Code
    5 Quick Beginner-Friendly CSS Customizations That Make Your Blog Stand OutCssblog
    In this tutorial, we'll cover how to do five quick CSS customizations that make your blog stand out. Even if you don't know what CSS is, you'll be able to follow the instructions and change the standard look of your theme.Read More…
  • Code
    Web Development
    Build Your Own Yeoman GeneratorYeoman wide retina preview
    Take a look at some of the more interesting features of Yeoman by learning how to build your own Yeoman generator.Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Code
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Code
    Statamic 101Statamiclogo 400
    Statamic is a modern PHP CMS which really makes an effort to be easy and intuitive to use. From its flat-file design to its use of technologies like Markdown and YAML, you can accomplish an outstanding amount of work without writing any code at all. In this article we will take a look at the process from installation to setting up a basic portfolio.Read More…
  • Web Design
    Styling Our Ghost Theme With LESSGhost less retina
    Welcome to the fourth part of our Ghost theme design tutorial series. In the introductory tutorial, you learned that there are two stages to designing a theme. During the instalments therefater we began and completed what we've referred to as "the first stage" of creating your theme's templates. This fourth part of our series takes us into the next stage of theme design, namely styling.Read More…