Alta Vista Business Services Blog

Recently, I discovered a template that referred to the term "cufon." in the css and Javascript and was both mystified and intrigued. I did a definition search on Google and found nothing. A query to the linkedin.com group CSS Linked, to which I belong, and the answer was soon presented. In short, it is way to use Javascript to embed custom fonts in Web pages so you don't have to render text to images. I have to thank my fellow CSS Linked member, David Shuford, for providing the definition. David is an Independent Internet Professional in Boston area.

I read a while ago that the ability to expand your font options beyond the ridiculously limited Web-system font options was on the horizon. Well here it is. There are few terms that clearly define this process, but it is more commonly becoming known as "Cufon"-- or more correctly "Cufón."

References describing how this actually works, are pretty technical and acronym ridden. In an attempt to break it down in its simplist form, below are specific references to the documentation and process for use.

According to Github developer Simo Kinnunen (a.k.a. Sorccu) (https://github.com/sorccu/cufon/wiki/About), due to the complexity of achieving embedded fonts on Web pages, a generator is recommended and a Javascript must be rendered. Through Github.com, Sorccu not only provides the generator, but allows users to use the form and offers troubleshooting guidelines.

Another source for generating the appropriate code is http://typeface.neocracy.org/ which, ironically uses text rendered as images for headings.

CSS and Javascript

It is the Javascript that does the embedding, but using CSS to render the font stylishly that makes all this so appealing from a designer's perspective. The time it saves to allow the CSS to do the work across the site, rather than tediously create type and apply styles and save them as images saves time (I know, understatement!). Plus it looks amazing, professional, and consistent.

Things to be aware of

Not all fonts are free.

Font foundries are making more and more Web fonts available-- which is very cool, but like any other resource, if you don't own it, you have to make sure you get permission to use it. You can purchase fonts for the Web and pay as little as $10 for the right to use on Web sites. Myfonts.com has over 9000 Web fonts from which to choose.

Supporting Browsers.

Not every browser supports Webfonts. But here is a list of browsers that do: Firefox 3.5+, IE 5+, Opera 10+, Chrome 4+, Safari 3.1+, iOS Mobile Safari, Andriod 2.2+ and BlackBerry OS 6.

This is just the tip of the proverbial iceburg. I would love feedback on this topic from seasoned designers. Please use the comment form below.