Using sIFR font replacement

There are several ways of replacing standard web fonts with fonts of our own choosing. In a previous article we have mentioned a few techniques: Cufon, Typeface.js, Facelift Image Replacement (FLIR) and Scalable Inman Flash Replacement (sIFR). I would like to show how to use the last technique sIFR.

About sIFR
SIFR is an open source dynamic web font replacement. It uses JavaScript and Flash to change HTML text elements into its Flash implementation. So, basically, you can re-render any text available on your website using the font (or fonts) you like.

SIFR has a few pros and cons. One of the biggest pros is the ability to select and copy re-rendered text. your website usage feeling stays the same as if you have used a normal HTML website. Another big advantage is that it helps not to violate the EULA of fonts. All fonts used by sIFR are in SWF format. SWF's are compiled flash files that can't be opened again and changed (at least using official programs). SIFR is also well interpreted by all major browsers, including Internet Explorer 6. If a browser can't display the sIFR text replacement it nicely shows the original content.

Unfortunately sIFR does have a few cons. The most important is that due to Flash usage it slows the visitor's browser down. So basically, we should use it only for headlines and small parts of text. Also Adobe Flash plug-in is required.

How does it work?
First you need to convert your font into sIFR readable SWF. We can just use the FLA file and provided instructions. We can also download SWF fonts directly. Then, using JavaScript and some Flash we can replace (X)HTML text DOM elements with replacements.

How to implement sIFR
Let's show how to implement sIFR on our web site.

1. First we need to download the proper files. We can use the http://dev.novemberborn.net/sifr3/nightlies/ link for the latest release or beta of sIFR3.
[sifr files]

2. We need to unpack the downloaded files. We can test the added example to check how it works. When we do this directly from our hard drive we will see following warning dialogue window:
[javascript warning dialogue window]

I think the image is self-explanatory. We just have to open sIFR from a web server due to Flash restrictions.

In the ZIP file we have following folders:
* css
* demo
* flash
* js

To use them, we need to create new HTML file or use existing one from the downloaded example.

3. We will prepare our own file to track the implementation process. Let's make an empty INDEX.HTML file in the main folder of the unpacked sIFR archive.

Here's the code we need:

4. We need to add proper lines to the HEAD section.

We have to link to all files needed by sIFR in a HTML section. Here's the code:

Files sIFR-screen.css and sIFR-print.css are responsible for CSS rendering when site is viewed by a browser (screen) or printed (print).

JavaScript files are responsible for the replacement. The sifr.js file is the main engine of sIFR. The sifr-config.js file helps us to configure all the needed replacement actions.

5. Setting up sIFR config file.

Let's use included fonts files that are placed in demo folder. There are two files: cochin.swf and rockwell.swf. That's how we set up them in JavaScript config file ( sifr-config.js):

//Declaring the font 1
var cochin = {
src: '../flash/cochin.swf'
};

//Declaring the font 2
var rockwell = {
src: '../flash/rockwell.swf'
};

//Activating fonts
sIFR.useStyleCheck = true;
sIFR.activate(cochin, rockwell);

//Replacing Headline H1 with Rockwell font and adding shadow to it
sIFR.replace(rockwell, {
selector: 'h1'
,filters: {
DropShadow: {
distance: 2
,color: '#b1b1b1'
,strength: 2
}
}

});

//Replacing all paragraphs with Cochin font and making background transparent
sIFR.replace(cochin, {
selector: 'p'
,transparent: 'true'
/*,css: '.sIFR-root { background-color:#eeeeee; }'*/
});

And that's it. Our replacement should work now like a charm. Check the example added to this tutorial (example.zip). It should look like this:
[sifr example]

Happy text replacing!