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.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
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.
( )michael September 7th
hi insic
( )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.
( )Pieter April 14th
Can you tell me how to install ImageMagick?
( )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
( )Aris March 17th
How is it not SEO friendly? All of the text is still in the page code. Do a view source on any of the FLIR demo pages. It’s a javascript function (client side) so the bots don’t see it.
( )Charles July 27th
Precisely. so quick to speak and so wrong, clay.
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.
( )Aris March 17th
What sort of issues did you run into with .htaccess?
( )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 ..
( )Charles July 27th
OMG. I was reading through comments for someone to mention. I think the tutorial above should elucidate this fact. Minor oversight on my part but it took me awhile to figure it out.
( )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…
( )Charles July 27th
We would need to address the licensing issues related to fonts being freely downloadable. Once cleared, we wouldn’t need flir or sifr methods.
( )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 
( )Charles July 27th
When you’ve got 200 different headers that may change, it’s difficult to keep coming up with new header images and match the file name to each header.
( )test September 1st
test
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.
( )Deron Sizemore December 8th
NICE! Tried sIFR a while back and hated it. Had the hardest time getting it to work at all, then once I had it working, had an even more difficult time getting widths and heights correct and ran into a weird bug in IE7 where text lined up vertically for some odd reason, so I stopped using it.
I got FLIR up and running in about 15 minutes and it seems to work great! The only thing that sucks is FLIR doesn’t seem to support letter-spacing regardless of the value. I can live with that though.
( )Deron Sizemore December 8th
Ugh! My apologies for all of the comments. Disregard my previous question about unstyling an h3. I figured it out.
Thanks for the awesome tutorial!
( )zac December 8th
I am now using this on multiple places in a design. Most of it works well and degrades ok without Javascript. However, there is one strange place in the site where the font is rendered backward (Da Vinci mirror style) when the Javascript is off ! ? Anyone else seen this or have any idea what is going on. The place where it gets weird I am using it as the style for the dynamically generated Page titles in wordpress.
( )iEthan January 4th
This tutorial is out of date. Please update.
( )Ross Tejero January 28th
I finally had the time to try this out. But ist just me or the demo file doesnt really work?
( )Tom February 1st
This is one of the things I have had bookmarked for a while, and finally got to give a try. Really looking forward to playing around with this technology.
( )iDevelopThings February 4th
Amazing post. Going to try it out.
( )Dave February 12th
Thanks a lot this tutorial was really helpful after struggling with sIFR
( )Dan February 17th
FLIR fonts demo here: http://www.endofyourtrip.com
( )Derrick February 21st
the demo works great in FF3. don’t see the problem others are talking about. nice technique. for those on the fringe, just make sure you backup your fonts with something like a serif, Arial, Helvetica, etc. for those in the stone ages.
( )Derrick February 22nd
Finally got around to trying this.
Sorry to say its a flat bust. Didn’t even work in FF3.
Was really hoping this would work. Will just have to wait for CSS3 to takeover.
Nice try.
( )Ruyruy March 17th
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.)
( )JP March 29th
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)
john Doe April 11th
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?
john Doe April 11th
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?
( )mindlesswizard May 5th
wow !! it works !!!!!! but i think siFR is more useful in terms of SEO issues !!! but FLIR is another best alternative for sIFR !!!!!
( )mindlesswizard May 5th
@ 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 …… ;
}
( )Web Design Studio May 22nd
I think Cufon is a better alternative… probably the best font replacement so far… also pretty easy to install…
Cheers,
( )Alex Mos
ganar June 19th
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
( )Rare September 21st
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.
( )Umar October 8th
Fantastic!!! less trouble than sifr
( )samuel October 16th
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.
( )Ashley October 22nd
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!