Using sIFR

Chris — February 20, 2009

One of the most limiting aspects of web design is the fact that you’re limited to only a few standard fonts. Since I’m already slightly impaired in the design department missing one tool is a pretty big problem. Until CSS 3′s font support becomes a standard there’s only a few alternatives.

I’ve been seeing a lot of headlines about sIFR over the past year so I figured it was time to see what I could do with it. There’s currently a pretty functional version 3 of sIFR which I decided to use.

I’d heard it was a little complicated to use but it turns out it wasn’t has hard as I thought. Here are the instructions I used. They were pretty simple and correct so I’m not going to re-write them here. I will write down my steps though.

1. Download the sIFR files

2. Create a flash file with the font you want to use by opening the sifr.fla file included in the download, select the text in that file and change the font. Then export the fla to a movie. If that seems too hard you could fint one at this place.

3. Configure the JavaScript. The JavaScript configuration on the sIFR site didn’t work for me but I found a solution.

var syntax = { src: '/flash/syntax.swf' };

sIFR.activate(syntax);

sIFR.replace(syntax, {
selector: 'h1',
css: {'.sIFR-root': { 'background-color':'#E6E0C0', 'color':'#000000'}, 'a': { 'text-decoration': 'underline'}, 'a:link': { 'color': '#333333' }, 'a:hover': { 'color': '#BF5222' } },
wmode: 'transparent'
});

4. Put the links the the JavaScript and css in your header.

<link rel="stylesheet" href="/styles/sifr.css" type="text/css">
<script src="/js/sifr.js" type="text/javascript"></script>
<script src="/js/sifr-config.js" type="text/javascript"></script>

And voila! I got syntax for h1 and h2 tags.

Categories: Web Development Tags: ,

No Comments »

RSS feed for comments on this post. TrackBack URL

Leave a comment