Using typeface.js
Getting Started
Using typeface.js should be fairly pain-free. First you'll need to download the typeface.js library from
the Download page, and then a typeface.js font from the Fonts page.
Once you've done that here's about what it takes:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
<script src="typeface-0.14.js"></script>
<script src="helvetiker_regular.typeface.js"></script>
</head>
<body>
<div class="typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>
</body>
</html>
Here are a few things to keep in mind:
<head>
<!-- load any external stylesheets first -->
<link rel="stylesheet" type="text/css" href="/style.css">
<!-- then load the typeface.js library and typeface.js fonts -->
<script src="typeface-0.14.js"></script>
<script src="helvetiker_regular.typeface.js"></script>
</head>
<body>
<!-- go ahead and specify typeface.js fonts with CSS -->
<div class="typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>
</body>
</html>
| • | By default typeface.js will render text for heading elements (h1, h2, etc.) when those elements' styles reference typeface.js fonts. Remember that heading styles are bold by default, so you'll either need to add font-weight: normal to you heading styles, or load the bold version of the font if that's what you're after. |
| • | Any other HTML element referencing a typeface.js font needs to have typeface-js in its list of class names. If you have an element that already has a class name, for example, |
| • | You'll have to load external stylesheets before loading typeface.js. Otherwise, Firefox 3 might not have applied the styles when typeface.js tries to draw the text. |
| • | Unfortunately, specifying the font-stretch property will only work with inline CSS and not from any stylesheet. |
| • | In some circumstances in IE7 you may see a couple of milliseconds' delay before the browser shows typeface.js text after the page is rendered, producing a "flicker" effect. One way to get around this is to manually put a call to _typeface_js.initialize() just before your closing </body> tag. |
| • |
If you're willing to forego selectable text, you can get a performance boost by disabling this functionality. After loading typeface.js, you can set a configuration option to disable selectable text like this: <script>_typeface_js.configure({ disableSelection: true })</script> |
How It Works
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.
The typeface.js project has two components: the perl module for converting fonts, and the javascript library for drawing in the browser. The perl module extracts glyph outline information from truetype fonts and writes that data in JSON format. The javascript library then traverses the HTML document and renders text using <canvas> or VML to draw the glyphs.
Moving Forward
There's work left to be done. It would be nice to make some of these improvements:
| • |
Better support for selecting text (currently you can select in some browsers but there's no highlighting) |
| • | Full support for @font-face rules, if possible |
| • | Support for hinting (this seems like a viable option) |
| • | Speed improvements, especially for IE |
| • | Work around Opera's getComputedStyle() issues |
| • | Possible support for SVG backend |
| • | Work around needing to specify 'typeface-js' as a class name |
| • | More CSS support, including :hover and x-height |
| • | React to DOMNode* events to support DHTML |