Get sIFR to work

sifr-header

Get's fonts on the web

I tend to only ‘get things’ when they are explained to me in the ‘right way’. Too simple and I get bored, too complex and I switch off and try something else. The main reason I use WordPress is because a I ‘got it’ after 5 minutes. Something about the code, the documentation and the UI just seemed to be on my level and that was something that was missing in other CMS’s  I tried.

Which brings me to sIFR.  sIFR is away of replacing web fonts with practically any font you have on your PC! Sound good, well it is good but for some reason, for a long time I just didn’t get it. May be it was something to do with JavaScript, which is not one of my strong points, or the fact that sIFR changes text to a flash movie, which sound unthinkable to a web standards geek. But probably the biggest hurdle for me was the documentation, it didn’t really explain it in a way that I understood.

So for anyone who’s on a similar wave length to me, here’s my explanation of how to get sIFR to work: –

The reason you would want to use sIFR to replace text is because you can embed fonts into flash movies which aren’t universally supported on the web and the reason it is better than straight forward image replacement is that sIFR replaces text ‘on the fly’.

Take the title of this post for instance, it’s been replaced by sIFR, the font  being use is ‘Bau Super Italic’. You might not have that font on your computer but that doesn’t matter, you still see the correct font and I didn’t have to create the title in Photoshop. I just put a normal title in my WordPress post and sIFR did the rest, silently in the background.

Download the latest version of sIFR and unzip it,  There’s a whole bunch of files in there but there is really only 3  files that you need to get it to work: –

  1. sifr.js
  2. sifr-config.js
  3. sifr.css

You also need the .swf font files but I’ll talk about them later, firstly I just want to mention the 3 file above. sifr.js is the main work horse. You don’t need to look at that file, just attach it to your html document like this: –

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

The next file, sifr-config.js, basically activates your fonts, selects the html element you want to replace and styles the flash text with something that look suspiciously like CSS but isn’t. The files got a bunch of code in it already but it is just for the demo so just change it as you need.

Firstly you will need a variable so you don’t have to type the full path to your font every time you want to use it. It will look something like this: –

var bau_super = { src: 'http://www.yoursite.com/sifr/bau_super.swf' };

In the code above ‘bau_super’ is the name of your variable, it can be anything you want but it’s best to keep it the same as the name of your font file for consistency. The next part of the code is simply the path to your .swf font on the web. Now you can use your variable name instead of the full path

Next you need to activate your font.

sIFR.activate(bau_super);

That was easy. Finally we need to add the replace statement that selects the font you want to use, selects the html element you want to replace and styles the text in the flash file. The code is going to look something like this

sIFR.replace(bau_super, {
  selector: 'h3',
  css: [
        '.sIFR-root { text-align: left; font-weight: normal;}'
        ,'a { text-decoration: none; font-size:16pt;}'
        ,'a:link { color:#a00096; }'
        ,'a:hover { color:#a00096; }'
      ],
  wmode: 'transparent'
});

Basically the code above specifies bau_super (that’s your variable name) as the font you want to use, then after  ‘selector:’  it selects the element that you want to replace. In this case it’s all  h3  element but it could be any CSS selector such as a class or an id. Next, after the ‘css:’  we style the text in the flash file, it’s not really CSS but it looks and works in a very similar way but not all CSS rules are valid. The ‘.sIfr-root’ is the element you selected but If  element in your web page contain a link inside, you’ll need to style that next, this happens in the next 3 lines of the code and again you are going to use the faux CSS rules. The only other thing to mention in the above code is – wmode: ‘transparent’ – , if you’ve used flash before you’ll recognize wmode, basically it puts the flash movie on a transparent background. I believe you can also use background:transparent in the css statements on the sIFR-root, which may be preferable because some browsers don’t support wmode.

finally there is sifr.css this is just a normal CSS file that hides your original text and styles the flash object, not the text inside the flash file. You’ll need to attach it to you html document like this: –

<link media="all" type="text/css" href="sifr/sifr.css" rel="stylesheet">

So that’s JavaScript, CSS and HTML taken care of, now we just need our font. If you have Adobe  Flash installed on your computer you can simply open sifr.fla, which is in the flash folder. Once opened you’ll see a blank movie clip on the stage, double click the movie clip and you’ll see some text appear, simply delete the text and type a single letter in the movie clip, it doesn’t matter what the letter is, the important thing is that you change the text to the font you want to use. If you want to use font variants then you will need to type another character and click the bold or italicize button. Once you have a single character for each of the font variants you want to use, click file and export the movie clip. The resulting .swf file is your font, this is what you need to upload and specify in the variable you created in the sifr-config.js file. If you don’t have flash on your pc you can download a whole bunch of sIFR font , for free at isarie.com

Well that’s an introduction to sIFR. I’ve read a couple of articles this week one about font replacement at sitepoint.com and one at the A List Apart about web fonts both are definatly well worth a read.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>