Webmasters Gallery

Probably the most requested CSS feature of designers is being able to use custom fonts on web sites. Right now the only real way of doing that cross-browser is relying on Flash, either by building the whole page in it or by using the “Scalable Inman Flash Replacement” or short SIFR script. This does the job for most people but Simo Kinnunen wanted to avoid having to use proprietary software and go for canvas instead to reach the same goal.

The goals for Cufón were:

    * Absolutely no plugins required – Everything needed to display Cufón is already available by default in your visitor’s browser. Rather than requiring flash to make the switch, Cufón relies simply on javascript alone.
    * Compatibility – Cufón runs on IE6, 7, 8, Firefox and the latest version of Safari. On other unsupported browsers (IE5-, Safari 2) it will fail gracefully.
    * Ease of use – Little or no configuration required.
    * Speed – Cufón is quick. It loads almost instantly with no ‘flicker’ that you would normally experience with sIFR.

Technically Cufón is a web interface to fontforge and creates an SVG font on the fly from your source font using a JavaScript renderer.

Chris Jennings has more details on it and there’s a handy online generator for converting your fonts.

Visually this is pretty cool, however now we need to give it the same rigorous poking we gave SIFR over the years: what does it do in terms of accessibility, usability (copy and pasting text), scaling of text and most importantly overall page performance?

The other problem of course is copyright of font faces, and this is a much harder issue to tackle. Another solution with the same approach, typeface.js had issues with that in the past and this will not be different.

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.

Typeface.js uses browsers’ vector drawing capabilites to draw text in HTML documents. 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.

This code is and always will be free and open source. This includes both the typeface.js javascript library, as well as the perl module with functionality to convert truetype fonts to typeface ones.