Ever used GIFs to display that cool font on a website? You hope it doesn't effect your search ranking and accessiblity, but the customer is adamant that the design comes first.
Gordon Heydon mentioned this thing called Scalable Inman Flash Replacement or sIFR. Apparently some drupallians are using it (eg. Bryght). I had to find out more.
To quote from the above link:
Put simply, sIFR allows website headings, pull-quotes and other elements to be styled in whatever font the designer chooses - be that Foundry Monoline, Gill Sans, Impact, Frutiger or any other font - without the user having it installed on their machine.
Importantly, if the visitor does not have Flash/Javascript installed, the text is displayed normally. Here's some in-depth stuff about sIFR.
I am still looking, looking. It is an interesting exercise to spot the sIFR stuff. Some observations so far (using Firefox on XP):
- On the Bryght homepage the headings are sIFR (eg. Suitable for anyone).
- You notice when you select the text it is slightly jerky to select.
- An easy way to spot all the sIFR occurances is to Ctrl+A (Select All) the page. The sIFR text looks like it has not been selected. But if you then paste the text somewhere, the sIFR text is included.
- If there is a bit of drag on your processor (?) then the last thing to load is the headings.
What do people think about this?
Comments
I'm in favor of using
I'm in favor of using sIFR... it's a great way to add some cool typography without sacrificing accessibility.
I first saw these on some WordPress blogs... I installed the plugin for WP but didn't have very consistent results it.
I'm guessing you've seen the drupal module?
http://drupal.org/project/sifr
As far as drupal sites go, I've only seen it used on Lullabot and Bryght... and in both cases I think it's a success.
Using Dynamic PNGs
Before I had ever seen sIFR, I was looking into dynamically creating a PNG file... which is another good solution imo.
There's a good article on how to do it that way:
http://www.alistapart.com/articles/dynatext/
The examples are here:
http://www.stewartspeak.com/projects/dtr/examples/
Just replacing the first Letter
If you don't use sIFR, and go with the PNG, I've seen some people make the text that is replaced by the image to have an attribute of hidden, which I think still makes it accessible and follows standards.
Cameron Moll does this on his blog to just replace the first letter of the words. (which i think is a really nice non-web-looking use of typography)
http://www.cameronmoll.com/
<h1><img class="capF" src="/img/letters/f.gif" alt="" width="45" height="28" /><span class="hide">F</span>ree W3C webinar: Success!</h1>This would be a nice feature to build into the sIFR module for drupal. (Jeff, are you reading this? :)
Downloadable sIFR fonts
I've found some sIFR downloadable fonts at:
http://www.fontsmack.com/fonts
As with any site that uses sIFR, if you save the page from within FireFox and choose "Web Page Complete" then it will download the .swf file and you can re-use it as you wish... as long as you have rights or whatever is required and you're not stealing etc.
Anyway... cool stuff. Thanks sime.
..and a plug-in for jQuery
Great info. I like the link to the sIFR fonts. Apparently there is a process by which a font file can be converted - I just heard that on the breeze. Are sIFR fonts just your typical Flash-ready fonts? My wife is a font-tragic so she is very interested in all this.
I hadn't looked at the Drupal modules, I assumed there'd be something.
Another heads-up. I'm watching the jQuery mailing list. (In case you didn't know, there is work to patch jQuery into Drupal core.) There is someone doing a sIFR equivalent plug-in for jQuery that is almost alpha. According to Steven Wittens, sIFR and jQuery contain a lot of overlapping code so a jQuery plug-in seems the way to go.
Yeah... I heard about the
Yeah... I heard about the jQuery integration on the lullabot podcast a few weeks ago. There was some kind of lisencing hold up I think... can't remember. But it sounds very cool... looking forward to it.
On the sIFR question... they are not exactly fonts... they are .SWF files.
In Flash, you can embedd fonts into the FLA file and then specify a text block to load Dynamic text (instead of Static which is the default).
Somehow they're using javascript to send the dynamic text info to that sIFR (SWF) file and it then prints it back out. But, to use them, you don't have to have the original FLA file, just the SWF... and since they're so easy to download off of any site out there that's using them... I can imagine they'll spread like wild-fire for people that like this sort of thing. :)
I would like to create some on my own... just haven't tried it yet.
I think sIFR could definitely change the face of the web... I wish they loaded faster though. But since they're technically still accessible they're even accepted by lots of the standards extremists. :)
So for loading speed, it's
So for loading speed, it's generally one font per SWF yeah?
I wonder could you set the SWF to cache? Or does the dynamic loading prevent that. It would be cool if all font SWFs could be cached...
Yes... each font-face would
Yes... each font-face would definitely be in a separate SWF file... but in addition to that... the more characters you use to replace with sIFR, the more it has to load that same SWF file, and it tends to take longer if you use it more.
I think depending on the complexity of the font outlines, each sIFR (swf) file is different sized too... So, if it's a simple font, it should load faster... but more complex fonts would take longer.
Just guessing though.
Also, I wouldn't ever recommend using sIFR for the main body text... that would just take way too long.
For main H1 tags, I think it's perfect though.
One (minority) visitor use case that sIFR doesn't support well
(As I've noticed when browsing the web on my old Debian machine)
There is a small gap between users that don't have flash installed and those that have it fully enabled. Some ad / flash blocker extensions will handily replace the flash block with a block containing a play button for those limited cases where you do actually want to watch a certain piece of flash content.
I have that extension installed on that aforementioned machine because the flash player on Linux can be pretty unstable and some flash files can crash your browser. And it saves some bandwidth. So on that machine I see sIFR sites where I can't read the headings until I 'play' them all :)
But the small minority of visitors matching this case should be savvy enough to realise what is happening, and that it is just an self inflicted inconvenience (swings and roundabouts) rather than an accessiblility issue.
--
Cheers
Anton
sIFR 3 alpha
Since I've stopped watching for changes in sIFR Project http://drupal.org/project/sifr (need to check them again, great module, but have a lack of install instructions) I've decided to set up it manualy the latest version: 3.0 nightly.
As an example I'm using sIFR since last year, so imho have get it all especially 2.01 + hacked for 2-colors (by Maratz). My stable experiments now used by the huge commercial site and was hardly tested by a professional team, I'm still alive after all this.
What do I think? After a year of great sifr-headache have visited @Media 2006 Conference and attent the Dave Shea (csszengardener) panel "Web Typography" - the keyword was "sifr, sIFR? sifr! sIFR?!?". That was a really great panel (podcast and PDF shared here)
Not long ago I've installed sIFR 3.0 Alpha (nightly 160) on the next version of my project used Drupal 4.7.4. In earlies nightlies there was a "bug" with prefetching that was kindly updated by Mark Wuben and now sIFR renders fast on all browsers equiped with Flash Player >8.0.
Yes, pessimist would shake statystics spreadsheets with Flash players' version percents and so on, but I'd like to say that sIFR saved poor families of webtypography and saved the copyrights of font creators (there is no way to parse font back from *.swf).
To resume I'd like to say that sIFR helps much only for projects with corporative fonts (branding rules) and for creativity sites for design needs. It's really funny to find sifred sites with Arial or Verdana in its core:)))