I've put together a little demo because there's not too much help on the Sifr site, you can see it all working
here.
First of all, download the zip file:
http://www.petemorley-portfolio.co.uk/s/sifr.zip
Once you open that up, you'll see three folders and an index file, open up the flash folder, then open up Sifr.fla in flash.
Setting your font
Once you have the Sifr.fla file open, you'll see a blank text box on your flash stage. Double click this and you're greeted with "Bold Italic Normal". highlight this text and set it to the font you want to use. Now, double click the grey area around the flash document so the text disappears again. Go to file > Export movie. I've chosen to use Helvetica Neue so I've saved the movie in the flash folder as hel.swf.
Configuring Sifr
Next you'll need to open up the config file in the js folder, this is the little script that tells your page when to replace a selector with your chosen font.
Here's what each line in the config means...
Here, we're telling Sifr the flash/font file and path that relates to the name helNeu.
var helNeu = {
src: 'flash/hel.swf'
};
This bit of code tells Sifr that I want to replace my H1 tags with the helNu font and what CSS to apply...
Sifr.activate(helNeu); // From revision 209 and onwards
Sifr.replace(helNeu, {
selector: 'h1',
css: [
'.Sifr-root{ font-size:26px; color:#009ee0; text-align: left; }'
],
wmode: 'transparent'
});
Get it all saved up, you only need to call the two CSS files and the two Javascript files that I've referenced in the head of index.html, but you will have to put everything up on your server because a few of the files in the flash folder are still needed in the background.
That's it really, it takes a bit of playing with. You aren't restricted to headings, for example if I had a H1 in a div on the right of my website I could tell Sifr that I just wanted to style the selector: '#right h1'.
Hope this makes sense. You can call as many font files as you like, simply repeat the line of code that's calling Helvetica as many times as you need to, then reference your new font. It's also possible to style links, while keeping them clickable. Be careful of large font files such as Bleeding Cowboys or Trashed, they'll create a large .swf file that takes a while to call :icon_biggrin: