Loading ...
Loading ...Install FLIR – Typography Solution For The Web
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’ })
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.
[...] Go to the author’s original blog: Install FLIR – Typography Solution For The Web [...]
This looks like the perfect solution! It also seems easy to install and use! I’ll try it tommorow!
Thank alot!
@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!
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.
I’ve written a little Sifr converter at http://www.ianpurton.com/sifr/ that makes creating sifr 2 swf files a lot easier.
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!
@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!
one major problem – you can’t select the text. I’ll be sticking with sIFR
[...] FLIR [...]
[...] Install FLIR – Typography Solution For The Web » DivitoDesign (tags: webdesign typography php) [...]
nice article….. thanks
[...] Install FLIR – Typography Solution For The Web » DivitoDesign addthis_url = location.href; addthis_title = document.title; addthis_pub = ‘lroot’; This [...]
Flir detect the java plugin in your browser basically using font Arial and Times New Roman
major problem – you can’t select the text. I’ll be sticking with sIFR
[...] earlier in the week, I came across an article that talked about something called FLIR. Impressed, and a little jealous that I had not thought [...]
[...] sIFR is cool, but there are other alternatives! Stefan at divitodesign walks us through the process of using FLIR (facelift image replacement), which doesn’t use Flash at [...]
[...] sIFR is cool, but there are other alternatives! Stefan at divitodesign walks us through the process of using FLIR (facelift image replacement), which doesn’t use Flash at [...]
Wow, I didn’t even know about this. And it seems so easy to implement … I think I’ll try it out!
[...] Install FLIR – Typography Solution For The Web Learn how to install FLIR on your website. You will have more typography options, is easy to use, search engine friendly and makes your page loads fast compared to sIFR. [...]
[...] sIFR is cool, but there are other alternatives! Stefan at divitodesign walks us through the process of using FLIR (facelift image replacement), which doesn’t use Flash at [...]
[...] ? ????????????? ?? ?????? ????? ?? ???? ???????: ???, ???, [...]
[...] sIFR is cool, but there are other alternatives! Stefan at divitodesign walks us through the process of using FLIR (facelift image replacement), which doesn’t use Flash at [...]
[...] ? ????????????? ?? ?????? ????? ?? ???? ???????: ???, ???, [...]
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.
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!
@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
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.
[...] have been talking about and introducing great CSS typography alternatives like sIFR3, FLIR or Typeface.js. They have given us more typography possibilities and [...]
[...] easy-to-follow tutorial on how to quickly get FLIR, a non-Flash sIFR alternative, up and running on your site. More in [...]
[...] * Article interessant: http://www.divitodesign.com/2008/10/install-flir-typography-solution-for-the-web/ [...]
Note that multiple elements must be wrapped in square brackets like so:
FLIR.init( { path: ‘facelift-1.2/’ } );
FLIR.replace( ['h2' , 'h3'] , new FLIRStyle({ cFont:’hneueheavyext’ , mode:’wrap’ }) );
Can’t wait ’till Cory updates the documentation. It’s been a struggle with trial and error and sifting through the forums. Great tool though, really!
Never heard of FLIR, looks so great, really want to try it! Thanks
Thnaks for the tut, can’t get it to work tho. Followed everythign to the letter. I’m installing it locally using wamp. Should I try it on my server instead?
Seriously,
Tell people they need to CHMOD their Cache directory.
Nobody likes an incompete install-guide.
Sounds great but…Security???
Quote from Clarklab on http://css-tricks.com/video-screencasts/54-introduction-to-flir/
“Here at work I used FLIR in a project very heavily once only to have our security team come two days before launch and veto it. Apparently its not secure at all, the image paths generated have the full script parameters displayed, and there is nothing stopping someone from just blasting your script, over and over creating tons of server processing and filling your cache…”
I’d love to use it on my site but this sounds very bad!
Can you confirm/deny this claim?
I’m trying to do a writeup of FLIR for a class on CSS Design and I find both the documentation on their site, even this tutorial inadequate. I couldn’t get this replacing headings using the default 3 .tff files provided:
Unanswered questions:
-Is GD truly required (not clear from Corey vs. this tutorial)
-Where is GD placed (directory)
-Any FLIR files that need to be updated to reflect GD?
As I said, even without GD, I can’t get the three different fonts, or even one of them to replace some simple through I did on a page, then included the recommended javascript.
For now, I am not sold….
Attempting to run this in my WAMP environment but must be doing something wrong, as if I hit:
http://localhost/facelift/generate.php?text=hello
In chrome, the image gets created in the cache folder, but I get a broken image on the screen. When I run in FF3, I get a message that the image couldn’t be displayed because it contained errors.
The security issue is a problem though – I suspect the issue is that anyone could hit “http://www.yourwebserver.com/facelift/generate.php?text=some%20text%20heading” and be creating all the fancy headlines they want for their site without having any server processor overheads.
That’s a major problem in my eyes.
Andrew – I have to agree with you, it seems like a ugly security issue. I hope they are currently working on it to fix it. Thanks for the heads-up.
There is an error in the above documentation that can prevent the substitution from working. Step 3 shows that the code to place before the closing tag should call the “replace” function.
Instead, the code should call the “auto” function, as follows:
FLIR.init( { path: ‘/path-to-flir/’ } );
FLIR.auto();
This is the code used in the older documentation, and still seems to be correct.
It’s also not necessary to nest an ID of “permalink” inside the heading tags when creating definitions in the CSS. Thus,
h1#permalink {
only needs to be:
h1 {