Typeface.js is one of a few different canvas text/header generators currently available (the others we’ll cover later). When pretty, non-standard fons are used as headers on a site, a web developer normally only has a choice of two options:

  1. Make the header an image – which has the downside of a new image being required for each and every new header.
  2. Make the header in sIFR – a flash text converter which works very well, but does not scale when the user increases their browser text size.

The idea of Typeface.js is to replace your headers with a canvas text header instead. Fonts are saved as SVG co-ordinates and rendered dynamically. If the user changes their text size, Typeface’s text changes size too.


Typeface.js is very flexible

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

Lots of work is going on to constantly improve Typeface, and it currently supports Firefox 1.5+, Safari 2+, and Internet Explorer 6+ – degrading to standard header text for other browsers.

One of the biggest problems facing the canvas-based header programs at the moment involves font licencing. Unlike sIFR or image based headers, canvas-based header fonts are available for other people to steal. See the article Fonts and the Law on FontEmbedding.com for more information. Some font companies offer a seperate or extended licence for using fonts for this purpose. Please consult your font producer to find out if this applies to you.

Find out more about Typeface.js


Posted on:
March 1st, 2009
Posted by:
Andi Smith



Your Rating:
1 Star2 Stars3 Stars4 Stars5 Stars

Works on

BETA Please let us know if you find Typeface.js works in other browsers by leaving a comment below.



As browsers move into the full page zoom and away from text-only, the text resize issue will be irrelevant. Typeface.js and sIFR both bug me, because they have varied results when you try to copy and paste a block of text.

Posted on March 2, 2009

Andi Smith

A great point, which I completely agree with. Both Firefox 3 and Internet Explorer full page zoom now….

Except, Google Chrome launched with text-only zoom, bringing the whole idea of full page zoom crashing down again. Not too big a problem while Chrome’s market share is as small as it currently is, but when developer extensions are launched on the browser and it starts taking a larger slice of the pie, we are back to square one.

Posted on March 2, 2009


Safari 4 finally defaults to full page zoom now aswell. The first browser I saw doing it was Opera on my Wii.

Posted on March 6, 2009

Add comment

(will not be published)