Updated for version 2.07 of sIFR.
Apparently not nice apostrophes; but if you've ever come in contact with really good typography, you've bemoaned the sorry excuses you've been forced into accepting on the Web. Until CSS 4.0 or whatever, this tool offers a glimmer of hope.
For some carefully controlled circumstances you can use any font in your system as a display font on the web, enabling you to use stylish ones like "Adresack," below, or even script and novelty fonts, without having to individually create gifs in Photoshop. For what it's worth, but be careful.
sIFR is billed as "The Healthy Alternative to Browser Text." It's a method of delivering any font you have installed on your system along with your web pages, and displaying it more-or-less seamlessly with your content.
After upgrading to Firefox 3 and Flash 10, the old sIFR functions weren't working. Upgrading to version 2.07 and recreating the font movies with the new sifr.fla file, things worked normally again. One thing not mentioned in the documentation for the upgrade is the necessity of recopying your sIFR.replace... functions; don't forget!
The trick is accomplished by using a combination of Flash, Javascript and CSS. Among several nits you'll find is that you have to have the Flash application (not the browser plugin) to develop any of this. sIFR is a Flash template that embeds fonts into a movie. Open up sIFR into Flash, select the supplied text, apply a font to it, and export the movie.
After you add a few lines to your CSS and link to the supplied Javascript code, you're good to go.
I've tested this on Vista: Firefox 1.5.0.4 3.5.7, IE7.0; and on Chrome 3.0. If you're using Mac IE, you will see nothing special here, it doesn't support something or other. Both versions of IE place the headline in the left column too far down. That mostly has to do with how the page is structured; if I wanted to use this for production I'd need to rework my particular CSS styles to accommodate it.
You know you have. If you don't have javascript activated, or Flash 6+, you'll see the headline above as plain text. If you do, you should see an example of Coroneti, one of the script fonts I have on my Mac. Notice how these come across as real text, not an image -- go ahead, just try highlighting the text; it won't bite.
A couple of helpful tips for building these out that I didn't see in the documentation will save you some of the trial and error I went through. When you open the template, use the single-selection tool to select the invisible text box. use the Selection tool ("V") and double-click the invisible box. You should see the words "Do not delete remove this text." Then highlight the text using the font tool, and choose your font and export the move. I'm not capable at all in Flash so I went through several iterations with nothing happening before I stumbled onto the answer.
The Doghouse font is a very different size than Coroneti. Despite the fact that both of these are set to a base size of 11px, enlarged to 4.9em, the results are very different. Each font needs its own care. The developers spell the basics out in detail, but you're especially going to have to think about using the "height" parameter for your headlines.
One problem is that these movies don't play nicely with floated elements. Other potential problems include clipping. In Firefox, the above headline loses about one pixel at the top of the "S" in "So" and the "O" in "One." Script fonts can end up with the right edge of the last character in a line being clipped. If you're using IE, chances are the script font above clips this way. Careful management of line breaks and sizes can help.
Here are some code examples to show how I'm working these. In honor of this, I'm using the "Toolbox" font.
Two lines are necessary to add to your HEAD section to pull in the correct code.
You'll create each font as an .swf movie. I'd suggest you name them after the font, though that's fairly obvious. I put them in a folder called "fonts." In your CSS, or better in sIFR-screen.css, which the developers provide, you can subclass out the various headers (they recommend against going wild and doing blocks of text this way). I've decided to subclass out h6, since I'm not using it anywhere else on the site and I don't feel like recoding everything.
Then, add lines to the end of the sifr.js file to order up the substitution of screen fonts for Flash movies of the appropriate text. This is where you'll specify color and background color, along with a few other paramters covered in the documentation.
Then, after tweaking your CSS a bit more, you can immediately start using the subclassed headlines.
This is just a rudimentary idea of what you can knock out fairly quickly. The sIFR site has links to more examples, FAQs, samples and more. Questions about using this technique for links and lists are among the pertinent ones answered. Alas, I don't think you can properly kern or track these; the space between the "F" and "o" in "Font" at the top of the left column is pretty inexcusable.