Install FLIR - Typography Solution For The Web
Author: Stefan Vervoort | Please Comment!As we’ve talked about before, I am not happy with the lack of support for awesome typography on the internet. The possibilities are just limited, so we looked for alternatives. We have discussed sIFR3 in the past, so today it’s time we will experiment with another typography alternative: FLIR.
Basic Information about FLIR
Facelift Image Replacement or FLIR has been build because the author Cory Mawhorter got tired with the basic Arial and Times New Roman (who doesn’t?), and he didn’t like the way sIFR was solving this problem.
So he decided to develop an alternative called FLIR. It works with JavaScript, PHP and CSS, and doesn’t use Flash at all.
How does FLIR work?
When you have installed FLIR on your website and your visitor loads a webpage, your browser detects the JavaScript file. The text that is identified as “FLIR” text get send to your PHP server which will generate images with the fonts you specified. The original text will remain in the source and that makes FLIR search engine friendly.
This whole process is faster than sIFR and your visitors will not notice anything.
What if Javascript isn’t supported?
If Javascript isn’t supported the browser will simply return normal browser text and therefore FLIR is a very accessible technique that works anywhere.
FLIR Installation
When I was researching this technique I found out it is very easy to install FLIR to your website. We will install FLIR via 4 easy-to-follow steps:
- Download the files
- Configuring
- Add to the website
- Styling
1. Download the files
The first things you need are the files to make everything work. We need to download the latest version of FLIR files from the official download page. The version I use in this tutorial is 1.2.
2. Configuring
We need to configure the config-flir.php file to define the fonts we would like to use. Open the file and find the following lines:
}<?php // Each font you want to use should have an entry in the fonts array. $fonts = array(); $fonts['illuminating'] = 'ArtOfIlluminating.ttf'; $fonts['okolaks'] = 'okolaksBold.ttf'; $fonts['wanta'] = 'wanta_091.ttf'; ?>
If you would like to add ‘arial’ for example, you need to copy the arial.tff file to the fonts folder. Next you need to add the following lines of codes:
<?php $fonts['arial'] = 'arial.ttf'; ?>
Add as many fonts as you need on your site. There are more options that you can change but remember everything you do could have consequences for the output.
3. Add to the website
Once you have saved the config-flir.php file you are ready to implant FLIR in your website.
Add this line of codes between your <head> tags and after your stylesheet(s).
<script src="/path-to-flir/js/flir.js" type="text/javascript"></script>
Next, you need to find the </body> tag and you should add these codes before this tag.
<script type="text/javascript"><!-- FLIR.init( { path: '/path-to-flir/' } ); FLIR.replace(); // --></script>
These steps are important and if you don’t do it exactly like this, FLIR will not work correctly.
4. Styling
By default FLIR styles h1 to h5, but you could add more elements to this list. For example, you may want to style strong or em elements, or others. You can do that in this way:
Find the FLIR.replace(); attribute you’ve just added before the </body> tag. You can edit that attribute like this:
FLIR.replace( 'h2', new FLIRStyle({ cFont:'some font' }) ) FLIR.replace( 'div#entries h3', new FLIRStyle({ cFont:'some font' }) )
As you can see, you can add multiple elements to this list and give them a specific font.
If you would like to specify a default font, you can do it with the other FLIR function you’ve added before called FLIR.init();
<script type="text/javascript"><!-- FLIR.init( { path: '/path-to-flir/' }, new FLIRStyle({ cFont:'your font' }) ); // --></script>
CSS
Styling the elements you have included in the FLIR.auto(); is very easy and can be done with normal CSS.
h1#permalink{ font-family: 'your custom font', Arial, Helvetica, sans-serif; }
You should replace your custom font with a font you have added in step 2, in the flir-config.php. FLIR should be working fine now.
Other CSS styles
There is more. You can style your FLIR images exactly how you can style your browser text. For example:
h1#permalink{ font-family: 'your custom font', Arial, Helvetica, sans-serif; font-size:30px; /* All font-sizes are supported */ color:#ccc; text-align:center; }
Tips & Tricks
The basic installation is finished, FLIR should be working correctly right now. Here are some links related to FLIR that might interest you as well.
sIFR vs FLIR?
After testing and documenting both techniques I came to the conclusion they are both awesome alternatives to the default CSS typography. FLIR loads fast on your website and has a very easy implantation process, while sIFR uses Flash and has a more advanced installation method.
I would recommend choosing FLIR, because the ease of implantation and loading time compared to sIFR.
What The Author Has To Say
Because I am absolutely no expert in FLIR or Javascript, I wasn’t sure if I’ve covered everything FLIR can do, so I emailed the author Cory Mawhorter and he gave me some tips to improve the tutorial. He also wanted to respond to a couple of comments that have been made about the issues FLIR might have.
Scalability (comment)
You can use the the RefreshImages plugin included with FLIR to actually do a
better job than sIFR at resizing text. Any browser that actually changes
the font size when you zoom will be detected and the image updated. If the
element is set to wrap, this will also be detected. So if you resize the
browser window, the elements will wrap properly instead of travel off the
page.
Selectability (comment)
It is true FLIR lacks a bit in this department. I see it more as a browser
drawback, though. Copying works as expected in FF but not in other
browsers. In FF, when you select and copy a replaced image the ALT text is
grabbed, which gives you the desired result and actually allows you to copy
blocks of text. (In sIFR, you cannot copy the header that is replaced and
also the paragraph below it.)
Also, since FLIR was built with plugins in mind you could write a plugin to
handle the copying and pasting. I plan on eventually doing this but haven’t
yet.
Kerning Issues (comment)
The issue with the “I” isn’t a kerning issue but is actually a problem with
PHP and GD and the way it handles alpha transparency with font glyphs.
There are already multiple workarounds available that I have not implemented
on my own site (which is why it is still like that). They include, simply
changing the output from PNG to GIF or using the FancyFonts plugin, if you
need to maintain transparency.
To output GIF: FLIRStyle({ output:’gif’ })
To use FancyFonts: FLIRStyle({ mode:’fancyfonts’ })
Loading ...
Loading...
5:49 pm on October 12th, 2008
While I do appreciate the article I’m afraid I must disagree. I realise that it is not perfect but I find sIFR to be a much more satisfying solution than FLIR. Selectable and scaleable text versus an image is no contest, load times are negligible (at least on my connection) and as for ease of implementation well, you chose a very convoluted route. Check out http://designintellection.com/2008/this-is-how-you-get-sifr-to-work/ or http://css-tricks.com/new-screencast-how-to-use-sifr-3/ to see how simple it really is.
8:38 pm on October 12th, 2008
This looks like the perfect solution! It also seems easy to install and use! I’ll try it tommorow!
Thank alot!
8:53 pm on October 12th, 2008
@Mike - Alright, the scalable and selectable of sIFR is great and it works fine. But when I wrote the sIFR3 tutorial I had some problems with my connection (I know how dailup users feel now) and you see that sIFR definitely slow down your site.
In the end, FLIR is a great alternative to browser text and that’s what’s most important. Thanks for your thoughts.
@Santhos — You do so! It should work fine!
1:47 am on October 13th, 2008
While FLIR is a good method, I think it’s worth mentioning its kerning issue with certain fonts. You can see it in your example above with the word ‘It’s’, the ‘t’ overlaps the ‘I’. Not horrendous but I have seen worse examples around (NetTuts.com did a nice article on FLIR which anyone thinking about trying out FLIR might want to Google). I also find it distracting having the page load and then moments later (after the JS does its thing and the server spits out the image) having the headers change, sometimes shifting the page up or down due to the size differences of the original font text and the image that replaces it.
Still, I think it’s a useful alternative to sIFR for those who hate to use Flash.
8:08 am on October 13th, 2008
I’ve written a little Sifr converter at http://www.ianpurton.com/sifr/ that makes creating sifr 2 swf files a lot easier.
8:34 am on October 13th, 2008
I have used sIFR on a couple of sites and I am quite fond of it. FLIR will not work for me as I am not a PHP developer (strictly .NET). The idea could be ported to .NET, no problem.
However looking at current development with CSS3 and the support for using different fonttypes loaded from the web server, I feel that sIFR and FLIR are beginning to lose ground.
Thanks for the article!
9:29 am on October 13th, 2008
@Steve - Hmm I see the problem, but I didn’t see it before. Anyway, I think that problem will be solved in new versions of FLIR (maybe with letter-spacing or something).
@Ian - Thanks for that tool, I didn’t know it. I’ve used another tool to create sIFR files before in this tutorial.
@Rob - You don’t need any PHP skills to make FLIR running, just a bit editing (which should not be a problem if you are .NET developer).
I just hope CSS3 is getting accepted everywhere and fast. I think it might be horrible as always with new techniques, IE6 doesn’t support that and therefore we aren’t able to use it correctly.
Thanks for your comments, appreciated!
10:35 am on October 13th, 2008
one major problem - you can’t select the text. I’ll be sticking with sIFR
5:59 pm on October 13th, 2008
nice article….. thanks
12:59 am on October 14th, 2008
Flir detect the java plugin in your browser basically using font Arial and Times New Roman
2:36 pm on October 14th, 2008
major problem - you can’t select the text. I’ll be sticking with sIFR
10:13 am on October 18th, 2008
Wow, I didn’t even know about this. And it seems so easy to implement … I think I’ll try it out!
5:43 am on October 26th, 2008
Lack of Flash is certainly interesting, and I’ll give it a shot.
sIFR is ofcourse more documented, and I believe there are plugins for it on WP. Right? I wish there was a plugin for FLIR too - pretty fonts would be much easier then.
2:13 am on November 3rd, 2008
Re: Selecting Text
A plugin that gives the ability to select text has been released in beta. You can read more and get the plugin at http://forums.mawhorter.net/viewtopic.php?id=78
@Sumesh
A great FLIR plugin for WP has been created by Dan Zappone at 23systems.net. Just search for “facelift” at the Wordpress.org plugins page.
@Stefan
Great tutorial! I just added a link to this tutorial at facelift.mawhorter.net/quick-start Nice site and keep up the good work!
3:52 pm on November 3rd, 2008
@Cory - Thank you for the link! The selecting works great in Firefox 3 for me, but in IE6, it doesn’t work yet. When you are able to release a stable version, email me and I will write a new article about that.
Thanks buddy
10:40 pm on November 10th, 2008
I have followed these directions to the hilt to no avail. I can’t figure it out for the life of me. I have left things to default without changing any of the original script to test it out before adding my own fonts.