+44 (0)1805 625149
exceptional sites to your budget
[ Edit 2 December 2008: anyone considering sIFR should also look at typeface.js. I don't think there's a WP plugin for it yet but I could be persuaded to write one for a suitable reward. ]
[Edit 11 June 2008: this post is somewhat out of date as I've now stopped using sIFR on this site. I got rather fed up with its imperfections to be honest. ]
The typography of this site was looking a little dull, so I thought it might be nice to use sIFR to jazz things up a little. sIFR – which stands for the rather daunting-sounding Scalable Inman Flash Replacement – uses a some neat trickery, a combination of Flash, Javascript and CSS, to change fonts on a page dynamically when it is loaded. This means you can use heading fonts which are
without having the pain of creating substitute images for every item of text.
So, what does it take to get sIFR working with WordPress?
The first thing you need is the CG-Flashy Titles plugin. This makes getting sIFR working very straightforward indeed. The only problem I found was that to get things working you have to copy the “sifr” directory, which is the one where the the actual font files reside, from the folder belonging to CG-Flashy Titles to the main plugins one. So you end up with two copies of this directory, and, most importantly, all additional fonts you install have to be placed in both.
You’ll also want some font files, as the plugin only comes with two. If you have a copy of Adobe Flash CS3 then it’s not hard to create your own, but for the rest of us some help comes in the form of the libraries at FONTSMACK and Isarie. From the Isarie library I obtained ZapfElipt BT to use for headings and LyonesseTM for the descriptive tag line at the top of each page.
To configure CG-Flashy Titles (or any other sIFR plugin) you’ll need to understand CSS selectors. These are used to specify which text elements of your page are to be substituted. sIFR only works well with short text items, headings and the like. If the original and replacement fonts have similar characteristics you’ll generally get better results: if you’ve picked an unusual typeface then you may have to play with the settings to achieve something satisfactory.
You may also have to tweak your original HTML and CSS to get the best possible match between the original and replacement text objects. If the original element is floated and has margin and padding properties set then you are likely to encounter some of the trickier sIFR bugs: my advice is to wrap any such objects in a container and apply the complex CSS to the container rather than the one you are substituting. Keep the CSS properties of a sIFR-replaced object as simple as possible and you won’t go too far wrong.
All that being said, I found implementing sIFR on this site a rewarding experience and I’m pleased with the results. Until browsers become more type-aware, as they surely will, sIFR is surely the most practical way to enhance your site typograpically.
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
I’m always a bit concerned by how much sifr adds to the weight of a page. Are you turning your back on using dialup?
Also, as Dan Cederholm says here – http://www.vivabit.com/atmedia2007/europe/schedule/ – Renaissance typographers worked wonders with just one typeface.
In principle, if not always in practice, optimised sifr fonts can be a few K each, smaller than most image files.
And I don’t have the talent of a Renaissance typographer! I’ll probably look again at the banner text, which I’m still not quite happy with. Suggestions welcome.
I was thinking of the 42kb of javascript.
Incorporating subtitles elegantly is one the banes of my life. However, if I were you, I think I would remove the Web Services from your logo, make the logo bigger and then add the subtitle below.
42K? The sifr script is less than 10, unless I missed something.
I’ll play around with my logo and see what I come up with.
Hmm. I’ll have to check out cg-flashy titles. I’ve always used the nightlies: http://dev.novemberborn.net/sifr3/nightlies/
Also, see: http://novemberborn.net/sifr3/r278
It’s sIFR 2 rather than 3, which may explain the discrepancy. I’ve not tried 3 yet. When I was working on Metro (http://metro.lu/) the word was that 3 was even buggier than 2, but that may be mere hearsay.
“the word was that 3 was even buggier than 2, but that may be mere hearsay”
Well, sIFR 3 is still under development, so this shouldn’t be too much of a surprise. It’s stabilized quite well though, and it works much, much better than v2.
David Chait of CG-Flashy Titles has been working on an update for v3, not sure what the status is on that.
Thanks for that, Mark. I’ll look out for the updated plugin.
Why did you stop using sIFR? i was about to integrate it. Is there an alternative that will give me the same effect? What are these imperfections you mention? Can i live with them?
Ryan, it was more the plugin than sIFR itself. The fact that linked headings didn’t work as links after the flash replacement was one major bugbear. Mismatches between the original font and the replacement in terms of geometry can also cause headaches, as the code does not handle all cases well.
I know it’s possible to get sIFR working better than it was here as I worked on a site which uses it to good effect (http://metro.lu) but I didn’t have the time to spend on crafting a solution.
I am just building a new wordpress theme and am trying to get SIfr working in it as my friend thought it’d make my font look nicer. I’ve been struggling with it today. Looks like the flashy titles plugin could be just the ticket.
TY
Hello;
Thanks for this post, ive been digging around the web for a good sIFR plugin, and i tried this one out! seems pretty straightforward, although im having dificulties in getting it to show up
I get this error message: Unable to open file (/home/delkes/domains/delkes.com.mx/public_html/wp-content/plugins/cg-flashytitles/../cg-flashytitles.dat).
Do you think you could help me out?
I copied the sifr directory to the root of the plugins directory like you said, but it still won’t work.
any help is greatly appreciated.
thanks
pvf
I’m going to be installing sIFR on a WordPress site shortly and found your info to be of good help. I’m planning to give it a shot, but if I’m not happy with the results of adding sIFR (if it caused layout issues, loading issues, etc.) I am prepared to drop it…. but it’ll be interesting to see what happens.
SIFr shouldn’t be used on text other than headers. Other than taking up too much resources and can be exploited to make text less pretty (like on this page, but it’s not even SIFred 
, Like Wow Online states the following:
“The limitations of sIFR include: localization, extended character support, fouc, page zooming, text scaling, text wrapping, page load, cpu load, scalability, utf-8 compliance, QA testing, future-proofing, upgradability, wmode support, dynamic text sizing, DOM support, and z-index collisions.” (http://www.likewowonline.net/web/ued/sifr-usability-study.html)
Don’t misuse SIFr
I just implemented sIFR on a WordPress website within minutes using the WP sIFR plugin. I was surprised how easy it was, great plugin, takes all the hassle out of the task.
Hi,
I am using sIFR on my wordpress theme. But when I tried to implement the sIFR to other site, it had never been successful. The sIFR just change the index, but not on the other page. Any idea why this happen?
Thanks.
Erwin, it’s impossible to say without seeing the sie. Care to share a link?
