Scalable Inman Flash Replacement, or sIFR, is a technology that uses JavaScript and Flash to replace text elements in HTML files with the font you desire. So forget about Arial, Georgia, Times New Roman, Verdana, and Helvetica! With sIFR, you can display texts with any type of font you like without having the users installed the particular font on their computer – from san-serifs, romans, dingbats, handwritings… you name it! Thanks to Mike Davidson and all the people who involve in the development of this technology, problems concerning web typography is partly solved.

Why is it partly solved? Well, it is not the best typography solution. It has limitations and restrictions. Users who have neither Javascript nor Flash plugins installed or enabeled on their PC could still see the texts, but without the sIFR-based styling. It will unfortunately be displayed using the CSS-based styling. Even Mike Davidson admits that:

While sIFR is a liberating solution, it clearly falls into the category of “things which shouldn’t have to be done”.

You can read other limitations here.

How does it work?

As I mentioned before, sIFR relies on both JavaScript and Flash. If the browser has the JavaScript enabled, JavaScript detects if Flash 6 or greater is installed. If both of them are enabled, all the texts that use sIFR are hidden and replaced by the Flash movies referring to those texts.

How can I use it?

First of all, download the latest sIFR package here and unzip the file.

If you have a Macromedia Flash program:
1. Open sifr.fla
2. Using a Selection Tool (type “v”), double-click the stage (the white working-space)
3. Select the text “Do not remove this text”
4. You should now see the Properties Window. If it’s not visible, click Window > Properties or CTRL+F3
5. From the Properties Window, select the font you want to be displayed.
6. Click File > Export > Export Movie
7. Let’s call the file “font.swf” then click OK
8. Click OK once more

If you don’t have a Macromedia Flash program:
Don’t worry!! You can download the fonts from FontSmack.com. Make sure you download .swf file, which is either “Basic Character Set” or “Full Latin Character Set”. Rename it to “font.swf”.

Let’s now create a separate folder, name it with whatever thing you like. Copy these files (which can be found in the sIFR package that you just downloaded) over to a folder you just created:

• sifr.js
• sifr-addons.js
• sIFR-screen.css
• sIFR-print.css
• font.swf

Create a new html document in the same folder, and copy these codes:

	
	
	
	
	
	
	
	




	
The Gothic Times
	
Use sIFR? (Requires refresh) no | yes | forget

	

The CSS h1 style between line number 6 and 15 is the style you need if the user doesn’t have JavaScript or Flash enabled (and if the user has disabled the use of sIFR).

The JavaScript codes between line number 30 and 42 are essential for styling the sIFR. The codes include the CSS selector, the .swf file name, color of the font, background color, and hover color. For more information about this, please refer to the documentation.

Next, open a file called sIFR-screen.css and add these codes at the end of file:

.sIFR-hasFlash h1 {
	font-size: 55px;
	letter-spacing: 5px;
	line-height: 20px;
	visibility: hidden;
}

This CSS stuff is used to configure the size of the text. You can remove those properties EXCEPT visibility: hidden. Remember, different fonts have different sizes, so you have to play around with those 3 CSS properties (font-size, letter-spacing, line-height) by increasing or decreasing the values.

Open up the html file you just created, and you can see the result right away! It’s not that hard, right?? So, you can style your website with sIFR now!! 🙂

Tips: use sIFR as minimum as possible, i.e. use it only for titles and some texts that you want to emphasise (like short quotes). DON’T use it for long texts coz it will slow down the loading time of your page.

Happy sIFR-ing!!

NOTE: If you’re using WordPress, you can try on a sIFR plugin. I’ve never tried this before, so I don’t know how it really works.