Implementing sIFR

In this article I will give a brief overview about what sIFR is, the main advantage of it and then take you through the steps to help you implement sIFR in to your websites.

What is sIFR?

SIFR is a combination of Flash and JavaScript to allow web developers to use non-web standard fonts on their sites with the use of Flash. The use of this can improve the look of a website as it will work in every browser and text will look smoother than basic HTML text. In IE6, you will see that text is jagged, but in IE7 they changed it to make the text look smooth. This is nothing compared to what SIFR can do.

sIFR Example

Downloading sIFR

First of all you will need to download the latest version of sIFR from the , which is r436. When you download the zip file and unzip it, you will contain four folders named css, demo, flash and js. The css folder contains the style sheets needed to get it working, the demo folder contains a demo to see it in action, the flash folder contains the necessary Flash & Actionscript files and the js folder contains the JavaScript files.

Once the files have been unzipped you will need to copy the css, js and flash folders to the folder where your website files are stored.

Editing Flash Files

Before you can use sIFR you need to edit the Flash files. To do this, open sifr.fla in Flash, double click the white area in the workspace and you should see the text “Bold Italic Normal”. This is where you can change the text to the font you want to use on your website. You will only need to change the font family as the other styling options can be changed in the JavaScript files.

sIFR Flash

Now that you have changed the font family, you need to export the Flash file by going to File > Export > Export Movie. When the window pops up you can rename the file to whatever you want and choose a directory to save the file to, then click save (It is recommended to name the Flash file with the name of the font to make things easier). A new window will then pop up and the default settings can be left as they are. Click OK and the swf file will be compiled.

Installing sIFR

For sIFR to work, you will need to upload the css file, js files and the swf file you made to the webspace your website will be on. Once you have uploaded all the files that are needed for sIFR you will have to add the following code to the ‘head’ section of the HTML code.

<link rel="stylesheet" href="css/sifr.css" type="text/css">
<script src="js/sifr.js" type="text/javascript"></script>
<script src="js/sifr-config.js" type="text/javascript"></script>

Make sure that the paths to the JavaScript and css files are correct.

Configuring sIFR

SIFR needs to be configured before it will replace any text. To do this you need to open up the sifr-config.js file. Once the file is opened, the flash file needs to be defined. The text after ‘var’ needs to be renamed to the name of the font you chose to use. If the flash file is in a different folder then you need to make sure that the correct path is put in.

var futura = {
src: ‘flash/futura.swf’
};

The next step is to tell sIFR to activate with the following code, which also stops browsers from loading the file all the time.

sIFR.activate(futura);

If you are using more than one font Flash file then you can add them to the same line like this:

sIFR.activate(futura, rockwell, vandenkeere);

Finally you need to define the elements that will be replaced with the new font.

sIFR.replace(futura, {
selector: ‘h1, h2′
});

With the above code you can define as many elements as you would like to replace but I wouldn’t recommend replacing all the text on your site, as it will slow it down.

Now you can save the sifr-config.js file and upload it to your web space, refresh the page and see it in action.

Styling sIFR

The last stage of implementing sIFR is to style the text that you are replacing by using the CSS. Open up the sifr.css file and add the following code at the end of the style sheet to specify the font size.

.sIFR-active h1, h2 {
visibility: hidden;
font-family: Verdana;
font-size: 18px;
}

The sIFR-active class will only work if the sIFR is active. You will need to set the visibility to hidden so that the normal text is hidden from users and choose a font that is available on all computers. Once that is done you can upload the CSS file and see the results.

Related posts:

  1. HTML 5 From Start to Finish
  2. Cufón Font Replacement
  3. Useful Guide To A Successful Website
  4. HTML 5 Tutorial – Tags
  5. What Is Social Media?

Tags:

Leave a Reply

Contact Us Today...

For more information regarding any of our services or to arrange a free consultation simply send us a message or call 02920 290 080 for Cardiff and 01179 000 482 for Bristol.

Firefox 4 Beta

Mozilla have released the first beta version of Firefox 4. The latest version of this browser will include better support for many of the new web technologies, a new add on manager, crash protection from third party plugins and accelerated hardware support. One of the most obvious changes is that the tabs have now been moved [...]
» more

Cardiff: 02920 290 080 Bristol: 01179 000 482