If you didn’t already know, sIFR stands for ‘Scalable Inman Flash Replacement’. It allows you to display text on your web page in a font of your choice, thereby removing restrictions on limiting yourself to web safe fonts. It’s best used for headlines and a few titles but you really shouldn’t replace all text on screen with it unless you want your web page load time to shoot up significantly.
While you could get sIFR 2 to display pixel fonts with a hack , sIFR 3 brings inbuilt support for displaying pixel fonts, which makes the task a lot simpler. So here’s a step by step guide on how to use sIFR3 to display pixel fonts.
First, Download sIFR 3.(The version used for this tutorial is sIFR 3r278 which is the latest release at this moment. It’s a security update, so in case you have a version lower, an upgrade is still recommended.)
Next, unzip the folder to a location on your hard drive and then navigate to sifr3-r278\flash\ and open the file sifr.fla. Double click the movie clip overlayed on the white background and change the font to your desired pixel font through the properties bar. No other changes are needed.
I chose Craig Kroeger’s uni (05_53) font for rendering the day and date you see below the search box in the header. This quality font along with a few others are available free at miniml.com. A word about Miniml fonts… years back Craig used to have this beautiful (minimal designed, of course) flash website which was a real joy to browse (the website’s design has changed now but you could probably check it out on the Wayback Machine if you please). I think he was also amongst the first few people (correct me if I’m wrong here) involved with pixel fonts.
Getting back to the tutorial, now go to file>export and save it as an swf file, with the fonts name presumably.
Now navigate to sifr3-r278\js\ and open the file sifr-config.js which should be blank. Paste the following code into it:
var uni = {src: 'path to YOURFONTMOVIE.swf)'};
sIFR.activate(uni);
sIFR.replace(uni, {
selector: 'h6',css: [ '.sIFR-root { text-align: right; color: #72797f; font-size: 8px; text-transform: uppercase; }' ], pixelFont: true , transparent: true });
Save the file. (In the code above, the Flash replacement is targeted toward the h6 selector. Replace this with the selector you want to target for font substitution.)
A word about absolute and relative paths here. I suggest you use an absolute path for line number 2 of the code where you mention the path to your flash movie till you get the Flash replacement working. Once every thing is working, you can change it to a relative path. Why I say so is because if your desired selector is not getting replaced with the Flash file, you have one less a suspect to worry about while debugging then, since you know you’ve at least got the path to the flash movie right!
Okay, back to the tutorial. Now upload the sifr3-r278 folder (you can rename it to sifr if you like)without the demo and flash contained inside it since they’re not required. You can upload the folder to any place you want to put it.
Now for the last step. You need to invoke the following files in your template or index file.Add them in the <head></head> section of your file. Make sure you get the path right. Again, I suggest you place an absolute path down to the files required till font substitution occurs and then once it’s done, go relative.
<link rel="stylesheet" href="PATH TO SIFR FOLDER/css/sIFR-screen.css" type="text/css" media="screen" /> <link rel="stylesheet" href="PATH TO SIFR FOLDER/css/sIFR-print.css" type="text/css" media="print" /> <script src="PATH TO SIFR FOLDER/js/sifr.js" type="text/javascript"></script> <script src="PATH TO SIFR FOLDER/js/sifr-config.js" type="text/javascript"></script>
Now refresh your web page. Do a CTRL+F5 if you need to. A CTRL+F5 clears your browser cache for the page requested and is useful while testing and debugging stuff since you don’t want the browser to pick any stuff from the cache at that time. That’s pretty much it. You should be see your desired text getting substituted with the pixel font you chose.
In case something font substitution doesn’t happen, go through the steps once again and check whether you got them right. Try using absolute paths to the files required if you hadn’t done so. If something is still wrong and you’re using Firefox or Mozilla, try looking up the error log in the Error Console to locate what’s wrong, it’s probably a JavaScript issue. You can access the error console from Tools>Error Console in Firefox.
If it still doesn’t work after trying the above, drop me a comment and I’ll try and help you out. Happy sIFRing.
Leave a Reply