Start using sIFR on your website!
THIS ARTICLE IS OUT-DATED : READ THE NEW INTENSIVE TUTORIAL HERE
As I told my readers before, I will start experimenting with some new techniques in the future. sIFR is one of those things I already read something about, but never learned how to use it. I thought it could be handy in the future, so maybe for you too!
What is sIFR?
In the past, when using headings with fonts out of the public domain, you would have a problem. You should used images. If you are using a database to create those headings, it became a bit harder. sIFR was developed by Mike Davidson and Mark Wubben and for me, it was a great alternative for my images. CSS, JavaScript and flash are working together on the so-called ‘sIFR’ or ‘Scalable Inman Flash Replacement’ technique. With sIFR you can style your headings the way you designed it, without the need of finding a good alternative for your font. Without even loosing one keyword on your page.
What’s the system behind sIFR?
Some browser is loading a normal (x)HTML page. A javascript function checks, if the visitor has got Flash installed. If this is the case, javascript checks all the tags you would like to use sIFR on. Next, flash will automatically make flash movies from those tags. Actionscript will finish the job. It takes 6 points as size, and scales the whole tag up until the whole flash movie is filled. Your heading is finished. If javascript detects that flash isn’t installed, or if javascript is turned off, if renders the HTML page the way it was styled by CSS. This way, a visitor without the necessary support, doesn’t see a screwed up page, but a perfect normal page. They wouldn’t even notice they are missing something! These steps will take slightly longer then loading a normal webpage.
When to use sIFR?
You can use sIFR everywhere and anytime. As you have read before, sIFR has to execute some steps (html>javascript>flash). You wouldn’t notice the difference in loading time in the small usage, but when using sIFR for you whole page, you are going to see the difference. It is developed to style headings, quotes or any other small sentences. Therefore it is recommended to use sIFR for that purpose.
What machines and browsers support sIFR?
sIFR works on Windows, Linux and Mac machines with Flash 6.0 or higher, and javascript turned on. sIFR is supported by all major browsers like Firefox, IE 5+, Safari, Opera 7+. Some small browsers like Konqueror support sIFR too.
What do you need to use sIFR?
- The sIFR 2.0.2 files. – Flash program. You have to edit .fla files and export .swf, so a program like Adobe Flash Pro is recommended. – A website already styled with CSS. Your headings already have to look good, for the visitors without javascript and/or flash. They would like a good looking website too
.
How to integrate sIFR?
First, you should have downloaded and extracted the sIFR 2.0.2 files to a map on your computer. As you can see, it includes a .fla file, some .as files, a javascript file (.js) and a couple .css files. Open up the sIFR-print.css and sIFR-screen.css. Add all the codes to your existing CSS file. Next, make sure you are linking to your stylesheet the following way:
Don’t forget the media attribute, this is important.
The flash part
We’ll start with the flash file. Open up the sifr.fla file with your favorite flash-editing program. Do not upload this file to your website. The .as files will add important information to your exported .swf file. You’ll see the following box:
Double-click now on the box:
Click once again, and you’ll see under the box, another box called ‘properties’.
You can now change your font and add bold or italic to your headings. You shouldn’t touch the other variables, because this doesn’t change anything in the output on your website. When done, you should go to file > export > export movie and save it as ‘yourfont.swf’. Another window will pop up afterwards, and you should use Version: Flash player 6. Leave the other settings what they are.
The javascript part
The next thing you should do is to take a look in the sIFR 2.0.2 files you have downloaded. You’ll find a file called sifr.js. Open it with your text-writing program. Scroll through the lines of code and find these codes:
if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac){
sIFR.setup();
};You can add basic elements to this function, like background color, font color and which CSS tag you would like to add the flash too. You should do it like this:
if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac){
sIFR.replaceElement("h1.heading", named({sFlashSrc: "./yourfont.swf", sColor: "#004677", sBgColor: "#CACACA"}));
sIFR.setup();
};sIFR.replaceElement: Tag what you want to add the flash to. In my CSS file, the heading I want to use sIFR on, is named h1 .heading. When you use Id’s for headings, add instead of this:
sIFR.replaceElement("h1 #heading",This:
sIFR.replaceElement("h1>#heading",You should change the space to a >. Your sIFR will work. named: the .swf file you made earlier. Never forget to add the ./ before ‘yourfont.swf’. sColor: Font color. sBgColor: Background color. Now, when everything has been filled out, save your sifr.js file and move on to the page you want to add sIFR too. Add this code between your ‘head’ tags:
%MINIFYHTML4efc4de7dfa5d7bb3f2e645ec7201ead14%Don’t forget to change or delete the ‘path’ in the src. ![]()
That’s it! We are finished.
Upload your sifr.js, yourfont.swf, stylesheet.css and homepage.html to your website and see what sIFR does with your page.
Examples
My own try http://www.divitodesign.com
http://www.cactuslab.com/
http://www.astonmartin.com/
http://www.bryght.com/
http://www.jeffersonstreetinn.com/
Please support Mike and Mark in further developing this wonderful technology!








I don’t understand this. Do you have some examples of real time uses?
thanks man ! great post
http://nrs-co.ir ~> My site
I edited the orginal article and added some examples.
[...] Start using sIFR on your website! [...]
I am using sIFR and it’s cool but sometimes it is used too much …
one more thing as a tip
… you said “You can use sIFR everywhere and anytime.” well it is not true, you cannot use it in all situations … for example it is hard to implement horizontal navigation with sifr … and you have to be careful which font do you use …
Well, in theory you can use sIFR anywhere and anytime. Maybe it’s a bit harder in some places, but it is possible. With the point you mentioned, I aimed at the fact you should not use it for whole content paragraphs, because you’ll notice the longer loading time of your website.
Thanks for commenting!
Hi from Seatle, I came across your blog posting after searching for flash website and your post on Start using sIFR on your website! makes an interesting read. Thanks for sharing. I will research more next Friday when I have the day off.
I’ve got a question… some of my letters are not fully displayed… is there a way to fix this?
There might be a way to fix this. Can you send me an email with the exact problems and/or examples. Thanks.
Greetings to Seatle! Thanks for the compliment.
I would like to see a continuation of the topic
[...] CSS menu with rollovers. My article on their site Start using sIFR on your website! My article on their [...]
sIFR is a very interesting technology but im trying to find a good way to make menus with specific different fonts. It is difficult to find the solution that i need here…
I am doing this for SEO purpose and Design purpose, its very interesting for new website styles…
Hi working through this, how do i add more than a few options, ie a size for h1 and a different size for h2
I tried adding it to the example but had no luck.
Hi James – This example is a little out-dated. New versions of sIFR are out. I will write a tutorial for this new version soon enough.
[...] Alternative to Browser TextAuthor: Stefan Vervoort | Please Comment! Last year I have written a tutorial about sIFR. I covered a basic installation guide for sIFR version 2.0 and as of today, it is really out-dated. [...]