I’ve been playing around with sIFR (Scalable Inman Flash Replacement) and I’m a big fan. It’s a beautiful way of using custom fonts on web pages to users who have Flash installed. For everyone else, they don’t notice a thing and get the basic structured HTML and the text displaying in the font as specified in CSS.
As an experiment, I thought I’d try adding sIFR to Evolution.
Without sIFR – people without Flash see this.
With sIFR – people with Flash see this.
The code to implement it is really simple and looks a bit like this:
HTML
<h2>This is a headline</h2>
Everyone gets sent this; it is nice accessible and structured HTML which can be read by screen readers.
CSS
h2 { font-family: Verdana, Arial, Helvetica, sans-serif; }
Every browser which supports CSS will interpret this rule and display the heading in Verdana.
Javascript
sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"tradegothic.swf"}));
Browsers with Javascript and Flash support will see this and instead use Flash the the provided font (Trade Gothic) to render the h2.
It’s a fantastic way of using custom fonts on your website whilst keeping it accessible. Unlike text in images, the text can be highlighted and copied. The actual sIFR code is about 10KB and you might have another 10KB for the actual font. Initially this is a lot more bandwidth than downloading a couple of images but if it’s used throughout your site (especially with dynamic text) you save a ton of server overhead and you’ll end up saving bandwidth in the long run.
If you have Flash there are ways to package custom fonts for sIFR. For the rest of us, Fontsmack provides tons of pre-packaged fonts for use with sIFR. There’s a wide variety from girly fonts to grafitti and ultra modern fonts.
There is a list of sites which use sIFR at the sIFR wiki. They include ABC News on the headlines and Nike.
Might have a go at implementing some sIFR here.
I can’t remember the site but wouldn’t it be easier and a lot more widely used if a php script to generate an image with the required text is used. A blog uses this and I cant remember it. I like it.
Though this flash idea is quite nice.
It depends. sIFR has the advantage that it is more accessible (the HTML for Flash and Image replacement can be the same but image text can’t be selected) and smaller as it only has to download 15KB-25KB once rather than an image for every single headline. sIFR also adjusts size depending on the user’s text size setting (another point for accessibility). Saves quite a bit of work on the server too and offloads it on the client.
I quite like this implementation, and I’m probably going to use it on a website I’m building at the moment will save alot of effort having to create custom headers to make it stay with the theme. Evo one’s look a little tall though…stretching the images next to them.