Professional and Affordable Web Design

0800 080 5401

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 <head> section. Here's the code:

<CODE>

<link rel="stylesheet" href=".css/sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print">

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

</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):

<CODE>

//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; }'*/
});

</CODE>

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!

Comments1 Comments

Pk Anane

nice one.. tryin it out now..

04 September 2009

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of dsbs.co.uk website
dsbs.co.uk

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of countysecurity.co.uk website
countysecurity.co.uk

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »

-