Cufón – custom font embedding with Canvas/VML
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.
