Hackszine.com: Typeface.js - embedded HTML fonts sans Flash

Typeface.js - embedded HTML fonts sans Flash

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

Posted by Jason Striegel | Nov 12, 2008 08:34 PM
Ajax, Design, Web | Permalink | Comments (2)

Comments

Newest comments listed first.

Posted by: Paul on November 13, 2008 at 5:51 PM

Barcodes

This would seem a great way to generate a barcode on the client side, just convert a barcode font, and generate from plaintext. A nice way to avoid using (learning) image generation server-side.

Posted by: Kalle on November 26, 2008 at 4:06 AM

Developer

But if you can't mark or copy the text then it's just like an image.