How to add sIFR to your website
OK, I have recently had quite a few emails regarding the implementation of sIFR throughout our website and various visitors seem to be struggling with sIFR in their own website. So I have decided to give a basic run down of how I used sIFR on the iKreativ site.
Firstly, I decided to use sIFR 3 r436 which can be found over at Novemberborn.
Once you have downloaded and uncompressed the package the first thing you need to do is to open the ’sifr.fla’ in Flash, double click on the stage and then choose the font you’d like to use from the text panel. Once you have done this export your Flash movie the usual way. I decided to save my Flash movie with the same name of the font I used for future reference.
Next you need to edit the ’sifr-config.js’ file to suit your needs. The basics I used are set out below:
-
-
-
var yourflashfontfile = { src: ‘yourflashfontfile.swf’ };
-
-
sIFR.activate( yourflashfontfile );
-
-
sIFR.replace(yourflashfontfile, {
-
-
selector: ‘h1′,
-
-
wmode: ‘transparent’,
-
-
css: [
-
-
'.sIFR-root {
-
-
color: #ffffff;
-
-
}'
-
-
],
-
-
filters: {
-
-
DropShadow:
-
-
{
-
-
knockout: false,
-
-
distance: 6,
-
-
color: ‘#000000′,
-
-
alpha: ‘.35′,
-
-
strength: 1
-
-
}
-
-
}
-
-
}
-
-
);
-
-
Obviously adjust the above settings to suit your needs. I’ll quickly try to explain the above code.
‘var’ - Sets the variable for your font file.
’sIFR.activate’ - Does what it say’s, activates your font file to be used.
’sIFR.replace’ – Replaces the selector with your font file.
’selector’ – The element you want sIFR to replace.
‘filters’ – I have used the filters to add drop shadows to my sIFR headings. You can use these settings, play with them to get the look you want, or remove them all together, it’s up to you!
Finally you need to upload the files to your web server and reference all the relevant files within your web design page. The files you need to reference are the sIFR stylesheet, sIFR JavaScript, and sIFR JavaScript Config as follows:
-
-
-
<script src="sifr.js" type="text/javascript"></script>
-
-
<script src="sifr-config.js" type="text/javascript"></script>
-
-
And that’s basically it, if all went well you should now have some sweet sIFR typography. Remember, sIFR is ideal for heading’s, and title’s, it wasn’t meant to be used on full paragraph’s.
I’m not a sIFR expert, this is just the way I did it, if I missed anything out please let me know.If you have any further problems I’ll try to help the best I can, alternatively you can view the official sIFR Documentation.
