Tuesday, February 24th, 2009

Cufón – custom font embedding with Canvas/VML

Category: SVG

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.

cufon generator

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.

Got any test data?

Posted by Chris Heilmann at 8:53 am

3.8 rating from 33 votes


Comments feed TrackBack URI

The one concern that immediately jumps out at me is that you can’t select any of the text that is replaced… in browsers other than IE7, that is. Is there any way to fix this?

Comment by PresenceLayer — February 24, 2009

A small correction: this library uses canvas and VML, not SVG.

I like it, it’s interesting; it’s very similar to the original approach I took when adding custom font capabilities to DojoX GFX (which was changed to support the SVG font specification instead).

What I do like about it a lot is the generator that accompanies it =)

A thing that would be nice-to-haves would be kerning support (not just word-spacing but true kern hinting; many fonts have it and most of the converters like Batik will pull that info for you).

I’m glad to see this topic generating more and more interest!

Comment by ttrenka — February 24, 2009

What about FLIR (http://facelift.mawhorter.net/)? I think its a good alternative to sIFR too.

Comment by bjoern — February 24, 2009

Cufón looks promising, but not being able to select text is a deal breaker for many.

Apart from the unselectable text issue (since it’s images), FLIR requires contact with the server… so that’s just not gonna end well.

Comment by MorganRoderick — February 24, 2009

@MorganRoderick: well, thats true, i just wanted to mention FLIR as another way to embed custom fonts.

Btw. it seems that Apples VoiceOver can’t read the text when using Cufón. With sIFR and FLIR VoiceOver has no problems at all.

Comment by bjoern — February 24, 2009

I’m currently using this on a couple of websites. They’re still in development so I can’t link to them just yet, but it works very well. I can confirm you can select and copy text… not sure what everyone’s going on about.

Comment by Lochlan — February 25, 2009

@Lochlan: Which browsers have you tested with?


The above example is able to select + copy text in Firefox … Safari + Opera on the other hand, not at all.

Comment by MorganRoderick — February 26, 2009

@MorganRoderick: Works on my dev site in Firefox, IE & Opera. Safari doesn’t even seem to work so it replaces it with my second font definition.

Comment by Lochlan — February 27, 2009

FontLab also offers some good solutions for embedding custom fonts in a website. Their main product is called “PhotoFont Web Ready.” Some of you might want to check it out.

Comment by davidocchinodesign — December 6, 2009

Leave a comment

You must be logged in to post a comment.