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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By James Lao
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Breezi Comming Soon page - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
It worked for me. I’m sure there were problems in your configuration. Check out Chris Coyier’s take on this over at css-tricks.com.
I discovered something those who love typography will hate though. The CSS property “letter-spacing” is not rendered by this solution, and probably other properties too.
Try it. Correct me if I’m wrong.
PS. Other fonts doesn’t seem to be rendering however I try. They just default to the next font in the list (Verdana, Georgia, etc.)
I just finished a project using FLIR and I’m pleased with how it behaves except for one thing. The slight delay in swapping the h1 with the generated image. FLIR does cache the generated image, but you can’t reduce the time it takes to download the html, prepare the DOM, fire up jQuery and do it’s business. It’ only really noticeable on pages with a lot of h3’s.
here’s the site: http://www.missrosethorne.com/
(you can remove the link if it’s against your rules or something)
So what’s the deal with the .otf fonts? Does flir support both ttf and otf?
I was checking out css-tricks and Chris said that doesn’t work?
Anyone know?
Another question, How do you know what the naming convention should be for font. For example I am trying to use “Cooper Std Black Italic”
I tried this but it doesn’t work:
$fonts['CooperStd'] = ‘CooperBlackStd-Italic.ttf’;
Can someone help me out with an answer?
wow !! it works !!!!!! but i think siFR is more useful in terms of SEO issues !!! but FLIR is another best alternative for sIFR !!!!!
@ john doe …..
u don’t have to be specific for the naming convention. just type in anything
e.g
$fonts['wizard'] = ‘CooperBlackStd-Italic.ttf’;
… but don’t forget to include it in your css
{
font: wizard, arial …… ;
}
I think Cufon is a better alternative… probably the best font replacement so far… also pretty easy to install…
Cheers,
Alex Mos
Having implemented both SFIR and FLIR I think that FLIR is much more easy to set up and controllable than SFIR.
The problems with SFIR stem from the use of flash, which is always a mess if you are using JS to place temporary layers on top of the content, among many other issues that make setting up typography with this method a very convoluted process
This is good as most mobile browsers have image but no flash support. And not yet up to CSS3 yet. So using FLIR or sIFR is a better option.
Fantastic!!! less trouble than sifr
i disagree i wasted my time trying to using this in my website…Of course i have gd library, but u need besides the FreeType library. My hosting doesn’t have freetype so i can’ use it.
I can’t get this to work… seems like I have to install the fonts on my machine which defeats the purpose of the web font. Can you please explain??
Thank you!
not support for internet explorere
I don`t know why but I have a little problem with line-height. There is a small part of the characters that doesn`t show (looks like line-height is too small) but when I put bigger line-height size it`s the same. Can somebody help me?
Try using the fancyfont mode (mode:’fancyfonts’) – it does rely on your server having Imagemagick installed – but worth a try.
Ampersands are being rendered as “&” in the image replacement process.
I tested to see if it was the site or if it was flir. Seems like it’s flir.
Anyone else using flir & ampersands ok?
I have very limited experience with html. I am enrolled in a web design cert course. I am doing an ebay template right now, & want the title in the template to be in a fancy font & the description to be in papyrus. None of the font will be in h1-h5, but the papyrus I want to be bold. Is bold considered the same as “strong� ? The fancy font I want to be in regular not bold or h tags for the title portion, the fancy font is a 1st choice & papyrus a 2nd . Can I do this without making it a heading, just using bold or strong on 1 font but regular font not even bold on the 2nd. Or maybe even choosing “style� which has a drop down above the font size in Dreamweaver? Also, wondering if anyone might know the answer to this question. When I choose the fancy font for the title in the font selector, (my second choice is papyrus in case someone has that font on their computer) I want the 1st font choice to be in size 36 but the 2nd choice, i to be in size 22. With FLIR can you make that distinction in the code for the same line of type, the 2 fonts being 2 different sizes? What is the best code for me to place in the FLIR.auto()? I have this in the FLIR.js file, path: ‘http://stacey.webs.com/facelift’ there is a different directory for the template. This is in my htm document. FLIR.init({path:’http://stacey.webs.com/facelift/’});
Thank you for any help, Stacey
Hi!
I made a nice video tutorial on using custom made fonts in websites.
You are welcome to take a look:
http://www.webmastervideoschool.com/how-to-display-custom-made-font-on-your-website-video-tutorial.php
Hope it will be useful.
Alex