Dayspring Technologies

Janet recently found a site that is using non-standard fonts for most of their text.  As we explored the site to figure out how they were doing this, we found Cufon.  Cufon allows for text replacement similar to sIFR, but without the use of Flash.  This opens up design possibilities using more fonts without making Flash a requirement.

Cufon works with IE 6/7/8, Firefox 1.5+, Safari 3+, Opera 9.5+, and Google Chrome, all without needing Flash.

How it works (the technical details)

Using Cufon’s online generator tool, a font file (TTF, OTF, PFB, or PostScript) is converted into a set of vector paths and stored in a Javascript file usable by the Cufon library.  On your page, you then import the core Cufon library and the Javascript files for the fonts you want to use.  With a simple Javascript function call, all the text within a given CSS selector can be switched to a different font.  In IE, Cufon uses IE’s ability to natively display VML to render the new font.  In other browsers, Cufon uses the canvas tag to draw the new font.  And since the font is stored as vector paths for each glyph, any size or word can be displayed.  The old method of creating a image for custom fonts is limited to the images that were pre-created.  Cufon opens the possibility for using non-standard fonts on blogs and other sites with dynamic content.

If I have this HTML in my page

<h1>This text will be shown in Harrington.</h1>

I can use this Javascript to change the font to Harrington

Cufon.replace('h1', { fontFamily: 'Harrington' });

But it can’t possibly be this good?

There’s a catch to using Cufon.  The license for a font may or may not allow it to be embedded in the page.  In previous uses, the images we created using a font contained a subset of the font’s glyphs and in a rasterized form.  With Cufon, the entire set of glyphs is represented in vector form, making it possible for Cufon and potentially anyone else to create text with it.  More simply, it is technically possible that someone could take Cufon’s version of the font and use it for their own work, essentially having gotten a copy for free from us!  This license problem is similar to that of the CSS3 @font-face attribute.

The exact restrictions on embedding vary with each font and font forge, but fonts purchased through Adobe’s Type Showroom are listed in one of 4 embedding categories.  Further complicating these restrictions is who and how content is created.  This is how I understand these permissions to work out.

• Installable fonts are the least restrictive, and are fully compatible with Cufon since they could even be permanently installed on the user’s computer.
• Editable fonts can be embedded in the content and also be used by users to edit the content.  A possible case might be a community site where user’s can post their own content, like ThingsAsian.
• Preview & Print permissions allow for viewing and printing of content, but not editing.  This would allow us to use this font with Cufon on sites where content cannot be edited by the user.  A font under this permission could be used for the Dayspring Public Blog, where we, the authors have purchased the font.  A font with Preview & Print permission could not be used for user-generated content on a site like ThingsAsian because the authors of content on those sites have not purchased the font for their own use.
• No Embedding is the most restrictive category, and doesn’t allow any of the portion of the font to be embedded.  Adobe says that none of the fonts in their Showroom have this level of permission.

To figure out what Embedding Permission your font has, just look it up in the Adobe Showroom and check the permission listed under “Embedding”.  Other font forges like FontFont only allow embedding as a rasterized representation or as a subset of the font.

In the end it’s best to check each font’s individual license.

Show me an example already!

Here’s the site Janet found that started all of this: http://www.brooklynfare.com/

And here’s an article Young-Ki found a little while back about Cufon: http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/

Tags: cufon, fonts

This entry was posted by Jeff W. on Wednesday, July 15th, 2009 at 4:12 pm and is filed under Graphic Design, HTML & CSS, JavaScript, Web Design. You can follow any responses to this entry through the RSS 2.0 feed.