sIFR (dynamic typeface replacement) - the good, the bad & the ugly

Alongside Uni work, I've been busy with a client project for Nottingham creative agency Active Ingredient.

The task set was to updating their Flash site to something a bit more contemporary looking and power it using Wordpress, following a design already made. So far so good.

One of the challenges I experienced on the project was getting the typeface used in their design: Vag Standard to render on all browsers. Above Arial, Times, Georgia and Garamond there isn't that much more that displays on both Windows and Mac. And without going for the relatively simple and straightforward image with hotspot hyperlinks I had to find some alternatives.

Enter sIFR.

Using preformulated javascript and a Flash swf that cleverly exports your chosen font in place of the browser default, it seemed promising. And once it works, it really is quite cool. Lots of sites use it.

In short, I really had a struggle in getting it to implement and work correctly. I initially tried the v2.0 that is offered on all main links from Google. However, after reading of an update fixing bugs, I found the latest nightly build of 3.0 here.

The earliest problem I encountered was that there doesn't seem to be a well considered, user friendly tutorial immediately available. After some searching though I think this is the best introductory one I could find.

Sometimes the sIFR would not render at all. This was solved by having to play around with the CSS in the original stylesheet, a sIFR.css stylesheet and then also a js-config.js file. They basically all needing telling a variant of the same thing - font, colour, margins. Importantly, size is not an issue as the coding works this out from our original design.

The next problem was text wrapping onto another line. Randomly. In Chrome it would work and then Firefox would display two with multi-lined text. A refresh of the page would have only one with multi-line. Talk about odd.

After reading suggestions of altering the margins or the line-height, on the different stylesheets, this didn't work. It was only at the 11th hour that I found a forum thread which mentioned a coding error in the deluge of javascript.

A simple change and the sIFR renders correctly!

var AN=x.forceSingleLine===true;
var AS=x.preventWrap===true&&!AN;

to

var AN=true;
var AS=true;

Hoorah. Unfortunately, it still isn't perfect though. Due to the nature of the design - using five colours in navigation links, these all require a separate request from the server and for Flash to produce these five distinct colours. The effect can be either a blinking flash or delayed appearance on screen, sometimes appearing piece by piece. Nothing big, but something, nonetheless.

In all, I'm glad I'm on this side of the sIFR experience ladder and have sample code that I know to work. I certainly am looking at using sIFR again, as having custom typefaces on a site really is a boon and lends itself to creating more aesthetically pleasing designs. However, frustration was a key issue when trying to implement sIFR for the first time. It really does take perseverance. Be warned!

----

All of this dynamic text replacement just makes the adoption of CSS3 even more urgent. The ability to host a font online and specify a font-face in the CSS once will be so much simpler.

That's more or less all there is to it. I'm ready for simplicity!

@