For quite some time now I’ve (at least with half an eye) been looking around for a font-replacement technique that doesn’t require Flash, and Cufón by Simo Kinnunen seems to do the job quite well so far. Instead of Flash, it relies on Canvas and VML in a pure JavaScript container.
Getting it to work is really easy, too: Just upload a font on http://cufon.shoqolate.com/generate/ and you will get a JavaScript file like MyFont_400.font.js. One click to the left you get the main Cufón library that does the actual font-replacement. Link both into your document and then use Cufon.replace('h1') to, for instance, replace the h1-element of your page.
<script type="text/javascript" src="/js/cufon-yui.js"></script>
<script type="text/javascript" src="/js/MyFont_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
That’s all. For starters. Cufón also exposes some options for each replacement and a way to easily bind fonts to dynamically created elements through its API. For now I’m just playing around with it, but it really looks promising :-)
Do you want to give me feedback about this article in private? Please send it to comments@zerokspot.com.
Alternatively, this website also supports Webmentions. If you write a post on a blog that supports this technique, I should get notified about your link 🙂