Embedding Fonts using sIFR 3
Posted by beThinker | Posted in Scalable Inman Flash Replacement | Posted on 21-06-2009
What is sIFR?
Scalable Inman Flash Replacement (sIFR) is a technology that allows you to replace text elements on screen with Flash equivalents. sIFR lets you use your favorite font on the website without the user having it installed in their computer and by cleverly working with Flash, JavaScript and CSS.
sIFR requires JavaScript to be enabled and the Flash player plugin in the reading browser. If either the two condition is not present then the reader’s browser will automatically display the traditional way using CSS based styling, the user will not notice or know the difference.
Before will begin this tutorial, please note that you’ll need the Flash 8 Editor in order to export the Flash movies. To help get up and running quickly see the details in Flash Configuration and JavaScript Configuration.
Download the latest sIFR release, click here.
Now to export new typeface, open the sifr.fla in Flash Professional and double click the visible Movie Clip then inside that movieclip there is a dynamic text then click that one. If the “Properties” palette is not already visible, open it by selecting “Windows > Properties”, and select your desire font. You can also create bold and italic styles for you font by clicking on the “I” or “B” buttons. To export the swf file, choose “File > Export > Export Movie”, and save as yourfontname.swf. Maker sure to export as Flash 6!.
If you don’t have a Flash Professional then you can also try the sIFR Font Embedder for Window or OpensIFR for Mac OS X (this is also work in Windows).
Applying CSS print styles
Copy and paste the CSS rules found in the sIFR-print.css to you own print style sheet. These ensure that your original headline styling will be printed, rather that the Flash replacements.
Applying CSS screen style
Apply the styles in the sIFR-screeen.css file with your own screen style sheet. These are the styles wich will be applied by the Javascript if Flash is found to be present on the user’s browser.
Including the Javascript
You must call the sifr.js script on any page that will be replacing headlines. Include the following line after the begin of the “<head>” tag or before the closing tag of the </head>, below is the code:
1 | <script src="sifr.js" type="text/javascript"></script> |
Now, to embed your font copy also the sifr-config.js and put it to the path of sifr.js. Then call the file, the same what we did in sifr.js. Edit the sifr-config.js then change the variable name and the source. For example will use Zafino font, so the code should look like this:
1 | var zafino = {src:'/path/to/zafino.swf'}; |
Remember try using the font name as the variable name, it is easy to remember which object you’re using. Next is to activate the sIFR. Put this code below the variable name:
1 | sIFR.activate(zafino); |
You can also use multiple movies, like so:
1 2 3 4 5 | var zafino = {src:'/path/to/zafino.swf'}; var futuna = {src:'/path/to/futuna.swf'}; var rockwell = {src:'/path/to/rockwell.swf'}; sIFR.activate(zafino,futuna,rockwell); |
Note: There must be “Only One” sIFR.activate(). Now we can do the replacements. You can do as many as you like, but as an example, we’ll replace all ‘h3′ element with the Zafino movie.
1 2 3 4 | sIFR.replace(zafino,{ selector: 'h3', css:'.sIFR-root{background-color: #ffcc00; color:000000;}' }); |
The first argument to ’sIFR.replace’ is the ‘zafino’ object we created earlier. Second argument is another object, on which you can specify a number of parameters or “keyword arguments”. For the full list, click here
The first argument you see here is ’selector’, which is a normal CSS selector. That means you can also do things like id and class selector ‘#left h1′ or ‘h1.title’. The second argument determines what the Flash text looks like. The main text is styled via ‘.sIFR-root’ class. Here we’ve specified background-color and color of the text. To read more about styling, click here
I’ve already tested this one and It works, I had no trouble in most of the browser.
