How To Use Any Font You Wish With FLIR

Aug 11th in PHP by James Lao

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.

Author: James Lao

I'm a web developer from Oregon. Currently I'm a student at Carnegie Mellon University majoring in computer science.

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.

Check out some more great tutorials and articles that you might like

How to Dynamically Create Thumbnails Screencasts
How to Use Amazon S3 & PHP to Dynamically Store and Manage Files with Ease PHP
How to Add Auto Complete to Your Google Custom Search Engine Javascript & AJAX

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

User Comments

( ADD YOURS )

Shane August 11th

I hadn’t come across this method before - I’m going to check it out, as I’d like to have some more font flexibility on a site I’ll be doing in the near future.

Thanks.
Andrei Constantin August 11th

not half bad, but on the demo, i see all four the same font
Thomas | Brush King August 11th

Thanks for this method
Thickey August 11th

Looks like S3 isn’t parsing your PHP correctly with the demo!
agustin ruiz August 11th

NICE !

WILL TRY IT
xDest August 11th

Great tutorial. It seems the demo is not working, though. My guess is that you have disabled short_open_tags on the demo system and the PHP files used all start with <? instead of <?php
BroOf August 11th

nice method!
Leo August 11th

Anyone knows how about letter spacing and leading on FLIR?
Dan August 11th

This is quite interesting
Ben Griffiths August 11th

This is a nice way of doing this, thanks
Roman August 11th

Demo is not working :/
Jerome Gravel-Niquet August 11th

I think FLIR is much superior to sIFR simply because it does not need to use the Flash technology. Much faster, less complicated, works better…
Dean August 11th

Demo doesn’t work, generate.php file is not interpreted.
Philo August 11th

Nice Tutorial!
Ty (tzmedia) August 11th

I wonder how more robust, or if any improvements could be made by incorporating this into a jQuery plugin?
Time will probably tell.
Craigsnedeker August 11th

Thanks a lot for this!
Tim August 11th

Wish I could see what this actually does. Demo not working. I know other people mentioned this already, but maybe with more people complaining, they might actually fix it??
iMike August 11th

Demo is not working on safari on my mac.
Jeffrey Way August 11th

Sorry everyone. I’ll get that demo fixed ASAP. For the time being, just refer to the main image.
Robin August 11th

I may be quite wrong with this but I am assuming that for each font added in, that requires that much more memory to be piped to the client? The reason I ask this is because as I look at the file sizes for for some of the fonts I have, some of them can be quite large. On average, most of my TrueType fonts are about 30-75kb in size, but there are others, for example, Palatino Linotype Italic weighing in at a lofty 421k and to top that “MS Mincho” coming in at 8,869k! (*note to self: must delete this POS font from system)

Thanks.
Robin August 11th

Tidbit in regards to prior post, MS Mincho is a Japanese character set. Explains the large size.
Lowell August 11th

“I may be quite wrong with this but I am assuming that for each font added in, that requires that much more memory to be piped to the client?”

naw, just the ones that are used..

it isnt sending the whole font file, its turning the required letters into images as needed..
James August 11th

Tried FLIR and sIFR3 but none of them seem to work on my MAMP localhost.
On Safari I get missing image boxes and on FF I get the text but without the font replacement.
I used the example files and uploaded to Localhost in root folder but still same problems.
Connor August 11th

This is a neat trick…
Dead.Pixel August 11th

Very nice!

Luckly CSS3 will be supporting webfonts (and already does on FF 3 and Safari 3.1) where you can simply do:

Setup:
@font-face {
font-family: Delicious;
src: url(’Delicious-Roman.otf’);
}

@font-face {
font-family: Delicious;
font-weight: bold;
src: url(’Delicious-Bold.otf’);
}

Call:
h3 { font-family: Delicious, sans-serif; }

(example from http://www.css3.info)

But this way would work on most browsers until IE catches up with CSS3.
Jeffrey Way August 11th

@James - Is the path in the flir.js file pointing to your facelift folder? Are you adding a trailing slash to the end of the path?
RonnieSan August 11th

This looks like a great technique and seems to be more predictable than sIFR. Does this use the same method of sizing the font as sIFR or do you have more precise control?

One thing I HATE about sIFR is the amount of fine-tuning required to get font-sizing correct. It does look like FLIR has poor kerning… in the last image, the “e” is clearly cut off.
Dan August 11th

Would it be a terrible idea to use this for body text, or is this something that should be used for headers only?
Tommy M August 11th

A great alternative to sIFR. Much easier to implement, and it uses PHP, Yesssss!
Tiago August 11th

It does not work with accented characters. [By translate.google.com]

Why????
Gadget Nerd August 11th

Another thing I’ve noticed is that you can’t copy the text either… at least not in FF3
insic August 11th

this is what i am talking about in your sFIR article.
Bram August 11th

Must say I like sifr above flir… I personally think users should be able to select all your text…
Tedel August 11th

Isn’t it easier to…

a. use a distributable font and give it out on your website? (I use Bitstream Vera Sans on my site and I distribute the font for free, respecting every copyright about it.)

b. wait for CSS 3.0?

Just curious.
Jeffrey Way August 11th

@Tedel -

a. I think this is extremely unrealistic. If I visit your site, there is no way that I’m going to take the time to download and install your font. That’s just wishful thinking, in my opinion.

b. Who knows when version 3 will be widespread. The great thing about FLIR is that it actually is extremely easy to implement into your applications.
Moksha August 11th

nice, thanks for sharing
mister August 11th

This isn’t working for FF3.0 - both on the demo page and the FLIR homepage.

About css3.0, from what I’ve read you will only be allowed you use free fonts. Otherwise you’d be breaking copyright by distributing a font that you and other pay for. With that said, I’m not sure if it is even going to be included in css3.0.
Jason August 11th

FLIR is alright, but SIFR is a much better method for text replacement. It degrades nicely to plain text when flash is blocked, its easy to set up, and text is still selectable. There are a couple downsides to SIFR, but none of which that wouldn’t apply to FLIR as well. Since SIFR uses Flash you can also protect those paid-for fonts with a couple of easy steps.
Chris August 11th

@Jeffrey & @Tedel
I agree with Jeffrey & for the sake of my own sanity I decided to visit a site that you ‘have-to-download-and-install-a-font-for.’ On top of practically not being able to locate this free font download, the site is still legible in Verdana(as the backup font), which i would put my money on the fact that 95% of traffic to that site views it in. 5% probably wastes their time downloading an ‘unusable’ font. I just don’t see the point for the extra work for ONE website!

@mister
I’m sure they’ll still include the feature in CSS-3.0. If people use copyrighted fonts, then others can sue them. (Thus, making more money for their font, for which I personally hope someone steals mine >:) ) I’m sure the w3c wouldn’t go through the trouble to implement something they are just going to remove.
Braden Keith August 11th

Very helpful, thanks.
Nathan August 11th

This looks interesting. How does this go in terms of degrading (ie. if images are turned off), and search engine indexing? And what about replacing linked text? The beauty of sIFR, is that for the most part, it can behave like normal text in terms of links, hover states, and so forth. Although I can see that this is a viable alternative for where flash isn’t supported - ie. iPhone.
Taylor Satula August 11th

Yeaaaa!
I was holdin out on the sifr for this
James Lao August 11th

Hey guys. I’m not sure what’s up with the demo. I dropped the source files on my server without modification and it worked fine. You can see it here: http://jameslao.com/flir-demo/

Currently on vacation so will not be able to do an in-depth investigation.
adelaide web design August 11th

great post. great for fresh web design
Jeremy Ricketts August 11th

Nice!
Serpentarius August 11th

I’m concern about the search engine indexing and degrading though…
mattems August 11th

ok the problem with the example is that there is no text between the h2 tags just an image tag, google will not like this.

utilizing gd is memory intensive

good tutorial about this technology but would def stick with sifr.
Ben Gribbin August 12th

Whats this like for SEO?
insic August 12th

you guys have a choice, choose which best you think that fits your need.
sam August 12th

Nice alternative to using Flash indeed. Not perfect but nice.
kim August 12th

works great thanks! one problem i have though is I can’t make the font larger than about size:12. It’s like fixed for everything. Anyone know why this is???
Matt August 12th

Could you use jquery to fire off the FLIR.init(); FLIR.auto(); using $(document).ready() instead of including the script tag within the body?
Tonamel August 12th

If the text isn’t selectable, then I don’t think I’ll be using this.

And much like CSS font embedding, I’d only be able to use fonts that specifically allow themselves to be put on a web server, since it looks like it would be pretty trivial to look up the location of the fonts in the js file and then download them all.
fwolf August 13th

another option would be to use ImageMagick to generate something more … aliased.
I’m going to build a test solution using jQuery right away ..

cu, w0lf.
James Lao August 13th

I’d like to address a few issues people have brought up.

1. This does not affect SEO. The text replacement is done via Javascript so search engines will still see the text.

2. It is not that intensive. The images are cached. Plus, CPU cycles are cheap. And before someone mentions disk space, that’s cheap as well.

3. The paths to the fonts are not stored in the Javascript file. They are stored in the PHP file, flir-config.php. You can even move the fonts outside of your web directory if you want to by changing the path in the config file. So you don’t have to worry about people downloading your fonts if you configure it correctly.
Joefrey Mahusay August 13th

Really nice
Clay McIlrath August 14th

FLIR is a terrible way to use custom type on a page, it’s unecessary code to do the same thing as a static image. Either way it’s still not SEO friendly which makes it pretty much useless. I think SIFR is still the best alternative if you want a custom font AND seo
EmpireFX August 14th

Cool idea, thank you
Colum August 17th

Very Nice!
Sandie August 18th

I’m torned!
Go sIFR or FLIR???
Think sIFR is difficult, but does also not feel “secure” about this…
nick August 19th

I’m gonna stick with sIFR. The fact that you cannot select the text with this and it seems you have a lot more control over leading and kerning with sIFR are gonna make me stick with it. Kinda a cop-out on the name too..
Riley August 20th

Great trick, i love this method… i can’t get it to work in dreaded IE6 or IE7 though
Taylor Satula August 21st

Looks kinda crappy in ie7 ( Who knew? ) but in ff and safari it is great i think that i might be using this one soon
Phil August 22nd

Just like to say, its a lovely little system once you can get it working however its taken me 2 days to overcome a variety of problems relating to the way our site has htaccess rewrite rules and file compression running in advance of any js/php scripting.

One thing that might be of interest is that my final hurdle relating to ie6/7 not working seemed to be some sort of javascript problems relating to the use of % font-sizes in css. Changed them to px and it all fine.
Bryson August 25th

I currently use FLIR on my site and I am very pleased with it. There have been a few bumps in the road, though that is because I am using the plugin version of FLIR for Wordpress. The plugin is only a few weeks old, but making great strides as the author fixes the bugs quickly.

For anyone that is worried about the SEO quality of this plugin, check out this link. http://www.webconfs.com/search-engine-spider-simulator.php

It will show you that each image is read textually by crawlers, every time.

Someone also pointed out that it was limited in what it could replace, the new version released this weekend addresses that issue.

I’ve heard that the IE bug is due to the way transparent PNG’s work in IE, and there are several fixes out there for IE’s special needs.

The part about this plugin though, is that it eliminates the need to make static images for each heading. It does it on the fly with dynamically created content and is ready to roll with several very popular js libraries. jquery, mootools, prototype, scriptalicious etc.
Amdin August 27th

@james, @Jeffrey

Just make sure that the cache directory is writable .. otherwise it wont work .

Great tuts by the way ..
Ilias August 29th

The demo doesn’t work for me on Opera 9.5
Safari an FF work fine. Someone know the reason?
Danh ba web 2.0 August 30th

Thanks for share ! I like it
gherick September 12th

Won’t work for me on Opera 9.52 and IE7 32/64bit. Any ideas?
Cory September 13th

@Ilias, gherick

The demo uses an older version of Facelift (v1.1.1) that had a bug with the way it handled font sizes specified in ems and percentages. Facelift v1.2 b4 is the most recent version and works in all browsers and also includes a lot of new functionality.
Ellen September 13th

I’d really like to see this work … it is what we’ve all been waiting for. I, too, would like to see how it gets handled by jquery, but it certainly is fairly straightforward as you’ve presented.

I’m on Mac OS X 10.4.11:

FF 3.0.1 - Works fine. Text properly sized according to the CSS is shown when either images or js is off.

Safari 3.1.2 - Buggy. Works fine, but nothing is displayed when images are turned off. Regular styled text is displayed when js is off.

Opera 9.51 - Does not work. Shows only styled text.

It works in Camino 1.0 as well, but it I was unable to make the images stop loading, so I don’t know if the error seen in Safari is replicated here.

I suppose I should add this to the author’s forum …
shweta September 15th

Hi,
Does that mean if I am a .Net developer, I can’t use it?? If that is so, its pretty bad. And, if it is cross platform than it ROCKS!!

Can’t we have a solution in plain HTML, CSS and JS (leaving aside PHP, .NET, Flash and all that stuff)

I wish we could have one…
dainix September 15th

thanks for another solution, i actually love css image replacement option with indenting text 9999px and replacing it with nice smooth image.

But ok, that’s not the same. I never needed it though, but anyway interesting solution if You realllly want that one hot font to use Thanks again
aravind September 15th

wow! i was lookin for something like this.. gonna have a try..
aravind September 15th

i tried it..
its never better than IFR - http://www.dezinerfolio.com/2008/01/02/php-javascript-image-replacement/
IFR - is smaller, smoother output, takes less amount of work for customization..
Cory September 19th

@Ellen

I responded to your post at my site. All of the situations you noted already have solutions. http://www.mawhorter.net/projects/facelift-projects/bug-in-safari-with-v12b4-background-transparency-problem#comments
RTW September 21st

Hi,

Thanks so much for sharing. Love your work. Everything’s worked great, except that I’ve run into problems with font characters that “protude” into the left, so that the overlapping bits of the character on the left is cut off.

See this as an example: http://rs359tl3.rapidshare.com/files/147325252/compare.jpg.html

The 2 lines are rendered by Photoshop and FLIR respectively, and you can see the differences, as highlighted by arrows. I’ve tried other similar fonts and the same thing happens. The left character is partly obliterated by any overlapping portion of the character on the right.

Any ideas?

Thanks for the great work!
RTW September 22nd

Ah, I just found out why. Sorry I didn’t read all of the documentation. Thanks again.
Gideon September 23rd

what is the path that we need to give in .js
Jitendra Vyas September 25th

not working in IE 6
Éderson F. September 29th

not working in IE 6 ,some hack needed?
Dennis October 7th

Hi.
In our case it did not work because our development environment is set to display all php warnings and notices. Disabling this for a specific project via .htaccess and “php_flag display_errors off” (at least temporarily) solved it.
Ross October 9th

Not working in IE7 here… same code does work in FF, Safari and Chrome
John October 13th

Have you checked out PCDTR yet? (http://pcdtr.joaomak.net)
It’s a great solution to text replacement.
michael November 2nd

Make sure you transfer the files in binary mode….My ftp was was set to ASCII by default and flir would not work when I xfered files using that
Remon Lammers November 7th

Hi,

I developped something similar, only with no configuration what so ever. Just drop the files in a directory, truely add one line of script and you’re set. No need to configure anything else or initiate it.

It works on almost all browsers, even old ones. It was developed to respect standards and is completely driven by CSS. There is a free version and a professional version. The pro version has full support for @font-face.

Check it out if you like. It’s called True Font Family and the website is http://ww.truefontfamily.com/
Skracanie linków November 10th

Awesome, but there is simpler -> CSS and font-face
Vijaya kumar S, Chennai November 13th

Very Nice, i will try to now.
Vijaya kumar S, Chennai November 13th

Very very nice, i will implement this cod now.