sIFR and WordPress: a Pretty Easy Combination
Wednesday, September 5th, 2007[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.
Sign up to our newsletter for great WordPress and Drupal tips.
September 5th, 2007 at 2:20 pm
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.
September 5th, 2007 at 2:39 pm
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.
September 6th, 2007 at 11:32 am
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.
September 6th, 2007 at 11:39 am
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.
September 6th, 2007 at 1:33 pm
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
September 6th, 2007 at 1:37 pm
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.
September 29th, 2007 at 10:42 am
“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.
September 30th, 2007 at 5:11 pm
Thanks for that, Mark. I’ll look out for the updated plugin.
June 12th, 2008 at 2:15 am
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?
June 12th, 2008 at 9:39 am
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.
June 20th, 2008 at 3:39 pm
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
August 14th, 2008 at 1:43 pm
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
September 18th, 2008 at 5:10 pm
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.
October 16th, 2008 at 12:04 am
[...] the official site for a complete guide to ISFR. Who uses wordpress might be interested in a fantastic plugin that uses ISFR to automatically generate .swf [...]