Friday, March 30, 2007

Rendering Typeface with CSS

One question I had about CSS is there any way of including Fonts in a Style sheet on a HTML page that the user does not have on their computer?

By coincidence I stumbled on a post on the WSG mailing list on this very topic. In can be achieved with the use of sIFR (Scalable Inman Flash Relpacement). It works using a “combination of javascript, CSS and Flash. A great starting point is an article by Mike Davison, which gives a comprehensive guide to sIFR. Below is his summary of how it works:

How it Works

“sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:

  1. A normal (X)HTML page is loaded into the browser.
  2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
  3. If Flash isn't installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you've designated as something you'd like "sIFRed".
  4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
  5. Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

This all happens in a split-second, so all of the checking, replacing, and scaling is not visible to the user. It is not uncommon to notice a very short delay as the Flash loads, but to the user, none of the internals of this process are exposed.”

Has anyone else used sIFR or come across it before?

References: Davidson Mike , April 27, 2005, “sIFR: Rich Accessible Typography for the Masses.” Mike Industries 30 March 2007, http://www.mikeindustries.com/sifr/

No comments: