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.
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.
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.
Have you used SIFR to replace text on the sites you’ve built? What tips or warnings can you share?
Jason Beaird is a designer and front-end developer with over ten years of experience working on a wide range of award-winning web projects. With a background in graphic design and a passion for web standards, he’s always looking for accessible ways to make the Web a more beautiful place. When he’s not pushing pixels in Photoshop or tinkering with markup, Jason loves sharing his passion for the Web with others.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers