How to use sIFR to make fonts smoother and cleaner on web pages
sIFR is a great way to make your font headings and short paragraphs look neat and anti-aliased, avoiding those jagged edges when fonts get too big on a web page. Using Flash technology, sIFR also allows you to use a custom font or one that may not normally be present on the user’s system.
You will need: Adobe Flash Professional
Step 1 - Download the latest version of sIFR
Visit the sIFR website for the latest version and download to your computer. Extract the .zip file and look for the the sifr.fla file.
Step 2 - Choose your font and edit sifr.fla
You need to manually create special .swf (Flash) files for each of the fonts you plan to use for sIFR. In this example I will be using Gill Sans MT. Open the sifr.fla file and double-click on the invisible text box in the centre of the window.
This will open the holder Movie Clip with the above text box showing. Select this text box by clicking it, and in the Properties panel, change the font to the one you want to use. If the Properties panel isn't visible, show it by pressing Ctrl+F3.
Step 3 - Export your sIFR flash file
Click File > Export > Export Movie... and save your .swf file as gillsansmt.swf, for example.
Make sure when you see the export settings dialog, to choose "Flash Player 6" if it's not selected already. All the remaining settings can be left as they are.
After this you can close the sifr.fla file without saving.
Step 4 - Add the sIFR CSS and JavaScript to your page
You'll need to include the sIFR CSS files and the sifr.js file in the <head> part of the page that will contain the sIFR text.
<link href="sIFR-print.css" rel="stylesheet" type="text/css" media="print" /> <link href="sIFR-screen.css" rel="stylesheet" type="text/css" media="screen" /> <script src="sifr.js" type="text/javascript"></script>
You should correctly format your existing text so that it will look right when viewed with a browser that doesn't support sIFR. I have formatted the <h3> element below in Verdana.
Step 5 - Add the final sIFR commands
The final commands you need to add are the sIFR.replaceElement JavaScript commands at the end of your HTML. For this one element, the following code is added just before the </body> tag (in tags):
sIFR.replaceElement("h3", "./gillsansmt.swf", named({sColor : "#000"}));
This tells sIFR to replace <h3> text with our newly-created gillsansmt.swf. The last command, sColor sets the color of the text in hex. There are many more options, described in detail on the sIFR website.
Step 6 - Try out your new sIFR text
Test your page in your favorite browser, and the result should be something like this:
Be sure to also test in other browsers to make sure your page will look as you want it to, to the majority of your visitors.
One Response to “How to use sIFR to make fonts smoother and cleaner on web pages”
The new version of sIFR is more easier to embed today, but we need a new version of flash editor to edit the sifr.fla. Recently, i used this sIFR on my blog and working great.
