It’s always struck me that font embedding is a huge omission from the web standards toolkit. If you’re not satisfied with Georgia and Verdana, you usually need to turn to images or Flash to get the typeface you want. Tools like sIFR have made this a lot more functional, allowing you to write standard HTML and have Flash dynamically replace content in the page, but using Flash just to display HTML text seems a little unsavory. Typeface.js changes all this, providing a standards-compliant way to deliver a rich type experience using HTML and Javascript with no proprietary technologies.

typeface.js uses browsers’ vector drawing capabilites to draw text in HTML documents. For a good while, browsers have had support for vector drawing — Firefox, Safari, and Opera support the <canvas> element (as well as SVG), and IE supports VML.

You declare the particular fonts to use with the font-family attribute, just as you would normally do in CSS. Then you add the “typeface-js” class to any HTML element that should be rendered by the typeface library. The actual embedded font is delivered to the page in the form of another javascript file, which contains the vector information for the particular font face.

The cool part is that any Truetype font can be easily converted to the javascript format using a perl utility that comes with the package (or a web form provided on the typeface.js site). Simply convert any fonts that your page requires and add them to your html using the script tag. The whole process is at least as convenient as building font swfs for use in sIFR, making it a worthy open source alternative.

Typeface.js – HTML/JS Font Embed Library

Previously:
HOWTO – Use rich fonts in your web design with sIFR