sIFR

Scalable Inman Flash Replacement (sIFR) is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents. It was initially developed by Mike Davidson and improved by Mark Wubben. It is a scalable variety of HTML text-to-flash replacement pioneered by Shaun Inman.
CSS support in web browsers did not, at the time of sIFR's creation, allow webpages to dynamically include web fonts, so there was no guarantee that fonts specified in CSS or HTML would show as intended, as the browsing user may or may not have had the specified font installed in their system. sIFR embeds a font in a Flash element that displays the text, preempting the need for a font to have been manually pre-installed on a user's system.

A common technique is to use raster graphics to display text in a font that cannot be trusted to be available on most computers. Text created this way pixelates when scaled and cannot be partially selected. In contrast, sIFR text elements mimic normal HTML text – they are relatively resizeable and copyable.

sIFR requires JavaScript to be enabled and the Flash plugin installed in the reading browser. If either condition is not met, the reader's browser will automatically display traditional CSS based styling instead of the sIFR rendering. sIFR is not designed for body copy text as rendering greater bodies of text with Flash place formidable demands on the computer. Due to this restriction, Mike Davidson himself admitted that
“ While sIFR gives us better typography today, it is clearly not the solution for the next 20 years. ”

sIFR has been used on a variety of well-known web pages, such as those of GE, Nike and Red Hat. As of December 2008, the current sIFR release is version 2.0.7. Version 3 is in beta.
Even though sIFR has been around for a couple years, many web designers have still never heard of it, let alone use it. sIFR (or Scalable Inman Flash Replacement) allows you to use custom typography on your site by utilizing JavaScript, Flash, and CSS. While most people simply create images when they need a custom-type title, sIFR can dynamically create short text blocks using whatever font you want (while still rendering the text with a default font on non-Flash browsers).

Why would this be useful? Well, for starters, it makes creating custom titles a snap (no images needed). sIFR is also great if you need to create titles on the fly (like for blog post titles). In general, if you want to utilize better typography for your site, sIFR might be the easiest way to pull it off.

Unfortunately, using sIFR is somewhat programmatic in nature and reliant on the user having a little familiarity with JavaScript and Flash. So for those who care more about implementing the effect than the actual programming behind it, here's a quick guide to get you started:

Step 1: Download the Necessary Files
For our purposes, you can download this zip with the necessary sIFR files (currently in version 3).

Step 2: Choose Your Font in the FLA and Publish
After unzipping the file, locate and open sifr.fla in the Flash directory. Double-click on the text movie clip, then click on the text and change the font to any font on your system. Publish the Flash file and move the newly created sifr.swf down to the same directory as your web page. Rename sifr.swf to a more descriptive name like avenir.swf.

Step 3: Include the CSS and Javacript in Your Page
Open up default.htm and notice the inclusion of these three necessary files:

sIFR-screen.css
sIFR-print.css
sifr.js

These files need to be included wherever you will be using sIFR.

Step 4: Create the CSS for Your Custom Type
Also notice in the default.htm that there is some CSS (which is included internally here for simplification):

This first part sets the size of the font as well as the backup font-family for non-Flash browsers:

.flash-title
{
font-size:22px;
font-family: Arial;
}

This second part is a required class used to hide the text if they do have Flash.

.sIFR-active .flash-title
{
visibility: hidden;
font-family: Verdana;
line-height: 1em;
}

Step 5: Run the JavaScript and Use the CSS
And lastly in default.htm, you need to run the few lines of JavaScript you see there, making sure to use the swf you published and named in Step 2.

var avenir = {
src: '/sifr3/avenir.swf'
};

sIFR.activate(avenir);

sIFR.replace(avenir, {
selector: '.flash-title',
wmode: 'transparent'
});

Now you're free to wrap any text in the flash-title class. That's all there is to it (note that you may have to run this on an actual server).

I'm no image. I'm real-life, selectable Avenir!

If you're feeling more ambitious, you can always explore the multitude of options via JavaScript and Flash at the official sIFR wiki and download site. And if you end up using sIFR a lot, consider donating to the developers who've spent hundreds of hours on this. Hope this little guide has been helpful!