27 January 2008
Use Any Font On Your Site With sIFR
Most blogs/websites whenever they want to have some fancy text for headlines/nav usually resort to using an image. This becomes a burden whenever you want to change things, and isn’t as good for SEO as plain old text. Enter sIFR, a javascript method for using *any* font on a webpage with little to no work. And it degrades well! Follow along on a full example.
I’m sure many of you are familiar already with sIFR, but this is for those of you that have not heard of it, or were skeptical about how hard it would be to implement.
Let’s look at what you can do with it. An example page is set up here that shows fonts being used. Theres no images on the page. Turn off JS and see that it still works fine.
First, head down and grab the latest release. Unzip it and make sure the demo html works ok. 2.0.5 is most current, fixing a problem with the latest version of flash.
We need to generate sIFR SWFs which are flash versions of a TTF font. So, choose which fonts you want, open sifr.fla in flash, double click on the big invisible box, select your font, and export it. That’s it.
What, you don’t have a copy of flash? That seems to be what gets most people. Luckily, theres an alternative to using flash. Check out sIFR Maker that converts TTF to sIFR SWF on a windows command line without needing flash.
Now, import the CSS and JS files into the header of your blog/webpage.
Next, in the header, add a JS code block and insert the following lines
sIFR.setup();
sIFR.replaceElement(named({sSelector:”{CSS SELECTOR TO SIFR}”,
sFlashSrc:”{PATH TO sIFR SWF}”, sColor:”#333333″, sLinkColor:”#333333″,
sBgColor:”#ffffff”, sWmode:”transparent”, sHoverColor:”#333333″, nPaddingTop:2,
nPaddingBottom:2, sFlashVars:”textalign=left&offsetTop=0″}));
You can add as many of the second line as you want to cover all your CSS selectors or different fonts you may wish to use. Also feel free to edit any of the above parameters to suit your design (color, etc). Most of them are optional
You can read a more in depth tutorial on setting it up here.
sIFR fonts can help your site be SEO friendly, easy to maintain (no more making new graphics when you need a new nav icon), all while keeping whatever typography you choose.
Remember to use it sparingly (only on headlines, etc), and to choose an HTML font that complements your new headers.
No related posts.