Unemployed Developer

If you haven’t heard of sIFR, it is Scalable Inman Flash Replacement which allows you to utilize flash, CSS and JavaScript to create custom typography on your web page. The font-family class in CSS can only load so many fonts as it will only load the fonts that the browser supports. sIFR allows us the option to use our own fonts and harness the SEO power of our text as we don’t have to rely on having images or flash files to display any custom text.

I’d like to look at a feature that more Flash developers would know about. I came across this issue when I was trying to find a solution to having drop shadows in my font, so my initial thought was to use the drop-shadow CSS class, but I didn’t like the lack of browser support for it, so that solution was out. sIFR seemed like the next reasonable solution to try. Since I prefer to use the jQuery library with any JavaScript that I use, I used the jQuery sIFR plugin.

I downloaded the ZIP file from the jQuery sIFR plugin page. This has all the files you need to get started, plus some font files ready made for you.

To get started with sIFR we include the jQuery library and other important JavaScript libraries which can be found in the zip file. Place the script following elements in the head tag of your web page.

<script type="text/javascript" src="path/tojquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.flash.min.js"></script>
<script type="text/javascript" src="path/to/jquery.sifr.js"></script>

Now we can add the jQuery code that changes your text to the custom sIFR font that you want to use. Let’s say we want to convert all our H1 tags to the custom sIFR font, Gunmetal that the zip file provided with us.

<script type="text/javascript">
$(document).ready(function(){
	$.sifr({
		path: "resources",
		save: true
	});
	$("h1").sifr({
		font: "Gunmetal"
	});
});
</script>

In this code path should be obvious that it points to the folder that contains the SWF file, which is named resources in this case. You will notice that we are changing all H1 tags to use the Gunmetal font. When putting the name of the font down you would use the same name as the SWF file. For example: Gunmetal = Gunmetal.swf, one of the other SWF files in the zip file provided is AvantGarde Bk BT.swf so we would have put: AvantGarde Bk BT in place of Gunmetal.

Now that we should have a page that now works with sIFR, how do we add some extra text effects that are not available in plain old CSS?

Well at this point we assume you have Flash and some general Flash knowledge. Inside the ZIP file you downloaded you’ll find another ZIP file. This file contains the Flash source file for you to change the font as you wish.

If you open this source file in Flash you will notice an empty movie clip on the stage. Open this movie clip by double clicking on it and you will see a text object on the page with text that says: “Do not remove this text.”, I would suggest you follow what they say and no remove that text.

At this point we can change the font to any of the fonts that we have on our system, publish the file and voila we can use that font with sIFR. Again I still haven’t gotten to the whole point of this tutorial, but I felt it was important to get the basic understanding of this operation in place first.

Now, that we know how to use your own font, how do you ad a drop shadow? Well while the text object is still selected, we click the filter tab to see the options for filters on our fonts.

Here we can click the + button and see some of the available options for text filters, from drop shadow, blur, bevel, gradient glow, etc. Play around with those and make your font pretty. When you are ready, publish, upload the SWF file and enjoy your great fonts online.

All, that just for me to tell you to click a plus button? I guess so, but I scratched my head for a little while trying to figure out how to do the drop shadow effect I wanted, when it was right under my nose.

Anyways, Check out the demo to see some “VERY” pretty text! (note: these are NOT the text effects I used on the site I was working :p)

P.S Highlight it to prove to yourself that it’s not an image!

View Demo