Be careful your designer can discover that you can embed almost every font in web pages.

I’m talking about sIFR (3rd release), the most famous, and a couple of other system like the most recent: Typekit.

Usually we can use only the few and abused web-safe fonts (verdana anyone?), and this happens becouse the browser can render only the fonts installed on the computer.

This is an ugly world and there are some luky people who can taste Helvetica and poor people who deserve Arial.
You can make the poor people life a little less bitter for short chunk of text (typically title) replacing the html text with a little flash or a pic.

sIFR design take the path to make javascript substitute the chosen element (and his child) with a flash movie of (almost) the same size.
sIFR3 is quite easy to add, the history is only 4 steps long:

1. get the .swf file: open the .fla file which come with the package, delete the text, set the desired font and publish the movie
2. add sifr.css to the page
3. add also sifr.js and sifr-config.js to the page:




4. Edit sifr-config.js putting the right .swf file, when activate substitution and some fancy parameters (color, background and other css-like thing).
   a minimal sifr-config.js:
   
var strangeFont = { src: "/path/to/strangefont.swf" } //path is relative to the page which load the move.
sIFR.activate(strangeFont); // you can have only one "activate", the syntax sIFR.activate(font1,font2,font3,...,fontN) is permitted.
sIFR.replace(strangeFont, {selector: 'h1'}); // .className for classes #idValue for ids (like in jQuery)


Ok, with this 4 steps you have the desired font on the page, but the layout is broken.
You can fix it knowing that sIFR.replace() accept a css-likesyntax:
sIFR.replace(strangeFont, {selector:'h1', css:['.sIFR-root{color:#ff0000; font-size:10px}']}
The code above give to every <h1> on the page a red color and a 10 pixel font size.
Warning is mandatory that the color code be 6 digits long. Flash can’t recognize 3 digits code like css.

Some other things to know:

• you can use transparent:true in sIFR.replace()
• you can add every style you need in sIFR.replace().
  So you can write css['sIFR-root{...}','.class{...}'] paying attention that all the selector be sons of the element you wanna substitute. This sistem isn’t perfect so use it a headache risk.
  To achieve this result is far more better use more sIFR.replace() starting with the most detailed selector ending with the most general.
  sIFR.replace('ul#main li.selected');
sIFR.replace('ul#main li');
sIFR.replace('li.selected');
sIFR.replace('li');
• sIFR know the size of the flash movie get the width and height of the object to be substituted, so if the sIFR js is executed before the rendering of the css (Safari load css and js at the same time) this can make your page looks weird. To verify this problem try to resize the browser window, if your page stop to look weird this is the problem.
  To solve this issue you have to apply some hack to postpone the js loading
• Avoid link replacing! sIFR cannot replace directly the <a> tags, so you have to apply sIFR to a father element. The results usually aren’t worth it.

sIFR is a really good script based on a clever idea, but i don’t like it.
I love typography, but text replacing isn’t a solution it’s an hack and as every hack did not achieve perfect results.

There are lots of embedding fonts technique around ther, but I’ve never tried them neither put on a live webpage.
I’m not tring Cufon ’cause you cannont select the replaced text (it’s a pic) and this is awkward for your user.

What is Typekit?
The bradcolbow.com summary is good, I think that this can be worth a try, we’ll see.