October 28th, 2008

Embedding fonts in web pages is tricky business. I never really liked the (and let’s face it) hack that has Flash do this job, since Flash can embed fonts. It’s always a little imperfect, since Flash never really integrates fully with web browsers. There’s a CSS way to do it, but apparently it’s spotty.

Hulu is the most popular website I’ve seen use the Flash technique. They use it for the titles of videos since apparently no standard font is capable of displaying it to their needs. Problem is, when you dim the screen, The title of the video doesn’t dim with the rest of the page (at least when I’ve used it). And despite some good effort, it’s basically impossible to highlight Flash and non-Flash text together.

But no more! Now there is typeface.js. It uses canvas (and VML apparently in IE) to draw the fonts directly. Since it’s the browser doing the work in integrates much better into the structure of an HTML document. You can actually highlight the text! Well, not in IE, but I’m betting those users don’t care. And it all fails very gracefully.

3 Responses to “typeface.js”

  1. Mr.doob Says:

    It was about time! Looks good! Thanks for the tip!

  2. Mike D Says:

    Hmm. I can highlight in i.e, opera and chrome but not highlight in firefox 2..

  3. Max Says:

    Mike D: It doesn’t seem to highlight the image, but if you copy/paste the text it works. At least in Firefox 3 it does.

Leave a Reply