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" ref="/style.css">
<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
</head>
<body>
<div class="myclass 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" ref="/style.css">
<!-- then load the typeface.js library and typeface.js fonts -->
<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
</head>
<body>
<!-- go ahead and specify typeface.js fonts with CSS -->
<div class="myclass typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>
</body>
</html>
| • | By default (starting with version 0.11) 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, <div class="heading">, you can just add another class name by saying class="header typeface-js". |
| • | 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.renderDocument() just before your closing </body> tag. |
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.
In browsers that support <canvas> the text is selectable, but you have to have faith. As you select there's no feedback, no highlighting to let you know that it's working. Future work will aim to implement better, cross-browser support for selecting text with highlighting.
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 |