Last year I have written a tutorial about sIFR. I covered a basic installation guide for sIFR version 2.0 and as of today, it is really out-dated. sIFR version 3 is out for some time now and has some more interesting and better features.

Let’s learn how to install the new sIFR 3 to your website!

Basic Information about sIFR

sIFR is the “Healthy alternative to browser text”, regarding to the authors Mike Davidson and Mark Wubben. With sIFR it is possible to display fonts on the internet that doesn’t have to be installed on the computer of the user. sIFR creates more typography options for the web!

The technique is a combination between Flash, JavaScript, CSS and HTML. Due this fact you have to remember to use sIFR only on important titles and subtitles because otherwise it might drastically slow down your site.

How does sIFR work?

sIFR has a system that really works great. The browser of your visitor (sIFR is supported by almost all browsers that support Javascript and Flash!) loads a basic web page. Javascript checks if Flash is supported and if this is the case, Javascript adds tags around the elements that will use sIFR.

Flash will now automatically load Flash movies where the new tags are located and ActionScript fills your Flash movie with the text, typeface and size. This all happens in split seconds!

What if Javascript or Flash is not supported?

If this is the case, the browser will load the web page normally, those visitors doesn’t even know they are missing the fun. That’s why sIFR is perfect: It doesn’t delete the original h1, h2, h3 or any other tag, which makes this technique pretty, accessible and search engine friendly!

Installation to your website

The installation and customization of sIFR on your website isn’t something you do in 30 seconds. Take your time and read this guide chapter by chapter and you will fly through it!

Table of Contents

1. Download The Files You Need
2. Generate The yourtypeface.swf File
3. Uploading Files
   
4. Implant sIFR Into Website
5. Configure sIFR
   
6. Style sIFR Titles
   
7. HTML Items Inside Your sIFR Title
   
8. Examples

1. Download The Files You Need

After a search for the latest version, I have found the directory where all the nightly releases are located. You should download the latest version. The version I will use in this tutorial is sifr3-r419.zip.

When you downloaded these files you should see four folders. Three of them (flash, css and js) contain the files we need to install sIFR so make sure you have a click away.

2. Generate the yourtypeface.swf file

We will use the sIFR Generator to do the job. It is also possible to use a Flash editing program like Adobe’s Flash CS, but I thought this way it is easier. You simply choose a TrueType typeface and walk through a wizard and your sIFR file is ready to go.

Walk through the Wizard

• Open the Wizard page
• Upload your TrueType (.ttf) font file – if it doesn’t select from the C:/Windows/Fonts folder, try copying it to some other folder.
• Choose sIFR version 3.419 – Maybe there are newer versions when you read this, that should be alright too!
• Choose Glyph Set - The more options to choose the bigger the sIFR file; you should select what you prefer.
• Type the Anti Spam words.
• Preview and download your sIFR file!

That’s all. You have your yourtypeface.swf sIFR file ready for use. Move on to the next step! I would like to thank sIFR Generator for this awesome tool.

3. Uploading Files

After we generated our yourtypeface.swf file, we are ready to implant sIFR into the website, but first you should upload these three files:

• js/sifr-config.js
• js/sifr.js
• yourtypeface.swf

sIFR also needs some styles to operate (sIFR-screen.css and sIFR-print.css). You can find in the css folder and you have two options to go with this. You could choose to upload these files to your webserver with the other files, or you could add these styles to your current media and print stylesheets. That saves us a couple extra miliseconds when the page loads.

4. Implant sIFR Into Website

To load sIFR to your website, we have to call for some Javascript files with these codes:

<script src="/path/sifr.js" type="text/javascript"></script>
 <script src="/path/sifr-config.js" type="text/javascript"></script>

Change path to the folder(s) where you have uploaded your files.

5. Configure sIFR

Next we will configure sIFR so it loads the correct yourtypeface.swf file. You should open up sifr-config.js located in the js folder.

sifr-config.js

This file will be used to configure the options we have with sIFR at the moment. I remember the time I had written the sIFR 2.0 tutorial and the options were everywhere! It has been much more organized.

Once you’ve opened sifr-config.js and you will notice there isn’t anything in there yet. We have to add the options ourselves. Let’s say we’ve generated a .swf file with the typeface yourtypeface you will use the following codes:

var yourtypeface = {
src: '/path/yourtypeface.swf'
};
sIFR.activate(yourtypeface);
sIFR.replace(yourtypeface, {
selector: 'h2.sifr-title'
});

Explanation Javascript

As you can see, the selector (the title we will add sIFR too) is called for by this element <h2 class=”sifr-title”>. You can change that to your likings.

If you used the typeface Meta when generating your file, your .swf file is named meta.swf. You can use these codes instead:

var meta = {
src: '/path/meta.swf'
};
sIFR.activate(meta);
sIFR.replace(meta, {
selector: 'h2.sifr-title'
});

You get the picture, right? After you saved this file and uploaded it to your web-server, you will see that sIFR 3.0 is working!

6. Style sIFR Titles

But, sIFR doesn’t stop with this basic stuff, there is loads more possible. For example, we could add some CSS that makes your titles look better.

Open sIFR-screen.css (in the css folder) and add visibility:hidden; to .sIFR-active h2.sifr-title. This will hide the standard HTML text when sIFR is loading. The .sIFR-active element makes sure the HTML text does show when sIFR isn’t working.

CSS

.sIFR-active h2.sifr-title{
visibility: hidden; line-height:1em;
}

Javascript

We can change the font-size, background color and more via the Javascript string we have seen in step 5. Not every CSS rule is supported, so check out what’s possible on the Styling wiki.

var yourtypeface = {
src: '/path/yourtypeface.swf'
};
sIFR.activate(yourtypeface);
sIFR.replace(yourtypeface, {
selector: 'h2.sifr-title',
css: 'h2.sifr-title{ font-size:14px; background-color:#cccccc; }'
});

7. HTML Items Inside Your sIFR Title

sIFR has also the possibility to add em, strong or even links (or anything else) inside your title. These kind of features make sIFR really awesome in use.

Styling goes as following:

var yourtypeface = {
src: '/path/yourtypeface.swf'
};
sIFR.activate(yourtypeface);
sIFR.replace(yourtypeface, {
selector: 'h2.sifr-title',
,css: [
'h2.sifr-title{ font-size: 14px; background-color: #CCCCCC; }'
,'em { font-style:italic;; }'
,'strong { font-weight:bold; }'
,'a { text-decoration: none; }'
,'a:hover { text-decoration: underline; }'
]
});

8. Examples

Everyone would like to see some examples where sIFR is used to see how it works and looks.

• Default Demo Example
• Blitz Magazine Online
• Jindou
• Streetlamp
• Deaf Can Do
• Need more Examples?

You want more?

sIFR doesn’t stop with the information I gave you here, many more things are possible. Here are some resources that you might enjoy.

• Mike Davidson and Mark Wubben – Authors of sIFR! Keep up the good work guys!
  
• Official sIFR wiki – Includes extra information about Styling, Javascript Configuration and many more.
• sIFR Generator
• Wikipedia Page
• Forum dedicated to sIFR – Go there for your advanced questions!

Keep in mind that I am a human too, so if you have found any bug, typo or error, please let me know to make this tutorial as helpful as possible.