A Brief Introduction to Text Replacement with SIFR

Tweet

Webfonts are great, and their adoption by a growing number of browsers has really helped push web design forward. Services such as Typekit make it easy to implement webfonts without a lot of hassle. Unfortunately, there are still a few reasons that you might want to use text replacement — licensing restrictions on the fonts that you need to use for branding reasons being chief among them.

One of the most popular options for text replacement is sIFR (pronounced “siffer”), which is an acronym for Scalable Inman Flash Replacement — a technology that allows designers to use Flash and JavaScript to apply their choice of fonts to headings.

The sIFR Logo

The basic premise behind sIFR is that Flash movies have the ability to embed fonts and display them in all their anti-aliased beauty to the vast majority of web users, who have Flash installed, and that JavaScript is able to replace specified HTML objects with Flash movies.

By putting these two concepts together, web designer and developer Shaun Inman was able to create a technique he called Inman Flash Replacement (IFR), the precursor of sIFR. IFR was a revolutionary development in typography for the Web, but it had a few minor shortcomings. Its most notable downside was that it could only be used to replace a single line of text. Recognizing the potential of this technology, Mike Davidson and Mark Wubben, along with countless supporters and testers, have put together a well-documented and easy-to-implement solution — sIFR — that has been released to the development community as open source.

Those who are skeptical of Flash and JavaScript solutions to the Web’s problems can be reassured by the knowledge that sIFR is a completely accessible solution that degrades gracefully. If users don’t have Flash installed, or they have JavaScript turned off, they’ll see the plain old browser text that the script and Flash were supposed to replace.

Finding examples of sIFR text on web sites can be difficult, especially when they use it to display fonts that are typically installed on many computers. ABC News, for instance, used to use sIFR to show news headlines in Futura, as the figure below illustrates. Futura is a font that’s installed for OSX users by default, but by using sIFR, ABC can be assured that a large majority of its users see headlines in the same typeface.

ABC News, featuring Futura headlines powered by sIFR

To download the latest version of sIFR, and access the full installation instructions, visit Mike Davidson’s sIFR Page or Mark Wubben’s sIFR Wiki.

Have you used SIFR to replace text on the sites you’ve built? What tips or warnings can you share?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • John Huiler

    With @font-face and Cufon I didn’t realize people still use SIFR.

  • http://www.itwebxpert.co.uk cheap website design

    it is a great post

  • http://migrosch.com Michael Grosch

    Thanks for the intro to sIFR. What licensing exactly issues do you think are the main reason to chose sIFR instead of  @font-face or any of the online font services like Typekit? I was wondering about the licensing issue for fonts you want to use for sIFR, after reading the FAQ over at http://www.typography.com/ask/faq.php?faqID=15#Faq_15. I also think that it could be an issue that there hasn’t been an update for sIFR since 2008!

    Although I haven’t used sIFR for any commercial projects, I found this sIFR generator very helpful: http://www.sifrgenerator.com/wizard.html

    Just my two cents.

    Cheers from Germany…

  • Jpage

    Flash will not work on the iPad.

  • Steffen Weber

    SIFR might have been useful a few years ago. Today we have web-fonts and Flash is nearly dead. Poor article!

  • jmz

    I think the sIFR is already history and not worth using nowadays. I used it extensively years ago when cufon was not available. But then went with cufon and never looked back: much, much easier to work with than sIFR.

  • Mark

    I have used fontface for most of my projects and never had i have an license issue, using a flash replacement tool is going back into time.

  • John Frenzl

    Lets move on to using @font-face. Most licensing issues are solved by now and by loading .eot, .woff, .ttf, or .svg fonts based on your browser type works great in all browsers, even IE6. sIFR and Cufon are a waste of time.

  • John Frenzl

    Check out http://www.fontsquirrel.com/ for using @font-face and fonts hosted from your web server. Obviously, you need to buy a web license for the font your going to use….cost isn’t too bad from fontspring.com

  • Alex

    Disappointing article.  The fact that it contains phrases like: “finding examples of sIFR text on web sites can be difficult” and “ABC News [...] used to use sIFR to show news headlines” sadly pretty much sums it up.

  • Anonymous

    I have used sIfr and Cufon and font-face.  While I like Cufon, font-face is the future of this topic.

    Good post

  • jmz

    I agree that font-face is the proper way to go, but I mentioned cufon strictly as a tool better than sIFR; that is, when you want that beautiful font to look really beautiful on all browsers/system (think about how those nice fonts appear on windows when cleartype is not active – I deactivated it on my win7 since it’s awful compared to osx or ubuntu font smoothing). So when you I want to make sure that a headline with a fancy font looks consistent across browsers, I recommend cufon.

  • jmz

    oh wait – I think it’s obvious that the author wanted to just ignite a debate in the comments. otherwise why would he bring sIFR from the dead when he clearly use better techniques (at least cufon, as you can see from his own website)

  • http://blog.geekyjohn.com John

    Why isn’t everyone just happy with Times New Roman?

    @font-face is pretty sweet, now if only browser vendors could agree on using 1 format!

    Cufon is a much better solution than sIFR for a few reasons, not least of which is that there are bugs in sIFR that have been around for years. 

    From Mark Wubben’s website: (http://novemberborn.net/sifr3)

    “Given that we’re well into 2011 at the time of writing, you should really think twice about deploying sIFR. Instead, have a look at Typekit or Fontdeck. There hasn’t been an update to sIFR since October 2008, and consequently it’s probably riddled with bugs. Seriously, don’t use it. It’s unsupported software.”

    • http://twitter.com/immeemz immeemz

      The problem with Cufon is that it’s inaccessible to screen readers.  Big #fail.  

      • http://blog.geekyjohn.com John

        Screen readers read each of Cufon’s <span>s as individual sentences. While I’m not 100% sure if this is correct behaviour by screen readers, it certainly seems like an odd thing to do.

        There are some workarounds about, but none of them seem to address the issues very well. If you’re definitely concerned about something like this, you could probably write a Cufon hook that removes the spans and inserts 1 hidden span back in so screenreaders can pick it up properly.
        456 Berea Street gave me the idea when they said there is an option to turn the span separation off http://www.456bereastreet.com/archive/200905/cufon_and_screen_readers/ There has also been mention of some accessibility fixes on Google Groups a while ago http://groups.google.com/group/cufon/browse_thread/thread/6e5140d12918bb35

  • http://www.facebook.com/MUSICISMYAEROPLANEE Tomás Camusso

    As many said, disappointing article. You should write about cutting-edge technology. Not flash.

  • http://www.stookstudio.com/ Erwin Heiser

    This is a joke right? Right?

  • http://www.3roadsmedia.com Ryan

    I wrote an article on how to install sIFR over 2 years ago…

    It’s surprising to me that a website like this would feature a technology so outdated  and with little advantage over more contemporary alternatives like Cufon and @font-face. sIFR is far too complex to get up and running to be worth using, in my opinion.

  • Richard Podsada

    We used to use sIFR for our sites a long time ago and it worked in its day. But I wouldn’t say it worked well. It degrades gracefully, which is nice, but has lots of bugs and layout quirks that can make it a nightmare to set up. We have since switched to cufon which works much better with minimal setup and problems. sIFR is dead, especially with services like TypeKit out there (even cufon is on the dying cusp because of this.) I’m still not entirely happy with the rendering quality of TypeKit so for now, cufon’s our guy.

  • Thepast

    I am going to assume this was just a joke….

  • Steve Mcgrath1

    Wow…was this article mistakenly put up from the 1990’s. Who uses sIFR anymore? Come on DF dont just throw up content for the sake of it.

  • suman sarkar

    Suman Sarkar

  • https://me.yahoo.com/a/XKLc0sEYrYt.x89LiNiKLrGxKbSaroU-#4c79e suman sarkar

    i like it

  • http://www.facebook.com/profile.php?id=825380316 Hardy Hemmingway

    I am surprised that this is even considered as a technique with “i”devices (and they are the ones I’m most frequently being asked to target in the B2B sector) numbering in the hundreds of millions in the wild. Article was useful though in that it pointed me in the direction of a couple of new possibilities in the comments section…

  • Ben Barber

    Ha! I think this article accidentally got dredged from the archives and republished as “new”. The ABC News screenshot — not to mention the technology itself — is from 2006.
    It’s nice to see how far we’ve come since then.

    (As an aside, this article makes a great honeypot for spam commenters and auto-sharers. That anyone would “Like” or “Share” this article in 2011 is hilarious to me.)

  • http://twitter.com/bogusred Susie Sahim

    I was really surprised to see a post about sifr the the sitepoint design view. This is older technology and I would not even consider this given there are better things out there today. But at least I learned a few things from the article comments!

    One thing I haven’t seen mentioned is the Google Font library which allows you to easily add open source fonts to your web page for free.
    http://www.google.com/webfonts

    Hope this is helpful.

  • Anonymous

    ╭⌒╮WELCOME TO
    —–  http://www.goodoye.com/ ……………
    Wholesale and reatail all kinds of world brand shoes,
    jeans,t-shirts,bikini,beach pants,handbags,wallets,
    sunglasses,belt,caps,watches etc..

    Best quality, Best reputation , Best services

    —**** NHL Jersey Woman $ 40

    —**** Jordan Six Ring_m $36

    —**** NBA Jersey $ 34

    —**** T-Shirt_m $ 25

    —**** Hoody_m $ 50

    —****U G G($80)
    (http://www.goodoye.com/ )
    WE ACCEPT PAYPAL PAYMENT
    YOU MUST NOT MISS IT!!

  • http://twitter.com/halilweb Halil Özgür

    Do you really think that Design Festival readers deserve this article at this age?