Cufon Fonts

Cufon Fonts

In the ol’ days. If you wanted to implement custom fonts on a web page you had one choice. Photoshop.

As the web progressed, designers began to look for alternatives to the boring assortment of web standard fonts: Arial, Times New Roman, Tehoma, Comic Sans, etc.

This led some clever programmer/designers to create tools that could (provided you had the right plugins or were willing to work with image replacement techniques that effectively turned you text into a picture) display a custom font in a header or two.

Intrepid web designers leapt at the opportunity and braving ungainly programming techniques and obscene bandwidth requirements created web sites that at first were for the rare few higher tier users with the latest browsers and plugins.

Well the web never sleeps and over time newer and improved techniques have developed to accomplish this goal. Currently Cufón is the definitive method for implementing custom web fonts on your site. With Cufon, a website’s text, headings, pull-quotes and other elements can be styled in whatever font the designer chooses – without the user having to install it on their machine.

It has significant advantages over earlier methods as it does not require the client’s  browser to support flash as does the Scalable Inman Flash Replacement (sIFR) technique and it is much more flexible than traditional image replacement techniques using CSS which rendered the text into graphical representation and not the text itself.

It was designed to meet the following four requirements

  1. It doesn’t require any additional plug-ins – it only use features natively supported by the client e.g. JavaScript
  2. It works on every major browser on the market
  3. It is very easy to use
  4. And it’s Fast – even for large amounts of text

Notice the use of the custom script font in the blog and article section on this site. The script is an open-source font called Daniel and the narrow san-serif is collaborate thin both of these were rendered using Cufon. You can highlight the text and copy it just like regular web copy. This means that the copy displayed in custom fonts is accessible to users and search engines just like regular html.

While there are 100’s of excellent quality Cufón ready font available on the web. Generating your own is not difficult. One caveat be sure that you have the rights to the font you choose. If it is a commercial font and you paid for it. Check the licensing that accompanies the font.

Once you have a font that you want to convert go to the following page http://cufon.shoqolate.com/generate/ to generate your custom font. If you don’t want to be bothered creating your own custom font you can choose from 100’s of Cufon ready fonts here.

Next download the Cufon Javascript. You can find it here: http://cufon.shoqolate.com/js/cufon-yui.js upload it and your font to your web site’s JavaScript folder (in this case /js/) and add the following two lines code to the header of your site.

<script type="text/javascript" src="/js/YOURCUFONFONT.js"></script>
<script type="text/javascript" src="/js/cufon-yui.js"></script>

Where js is your JavaScript folder and YOURCUFONFONT is the name of the Cufon generated custom font.
Implementing Cufon in your page is done through CSS. Typically by declaring it for header tags e.g.

<script type="text/javascript">// <![CDATA[

Cufon.replace('h1, h2, h3, h4, h5, h6');

// ]]></script>

Defining a class

<div class="fancytext">Fancy Text</div>

Or with an unique identify ID (if it only shows up once on a page)

<script type="text/javascript">// <![CDATA[
      Cufon.replace('#fancytext');
// ]]></script>

As to how Cufón accomplishes this, well suffice to say it uses some very advanced JavaScript to convert font paths to VML paths, stores this information as JSON (JavaScript Object Notation) and then renders the fonts using JavaScript. Since this article is designed to explain the advantages of Cufón and demonstrate how to get started using Cufón, I’ll reserve a more technical study of the technology for later along with an appraisal of TypeKit, @font-face and the goggle supported initiative for public custom web fonts that crushed them google fonts…

Here are some links to get you started:

Website: http://www.cufonfonts.com/

Cufón Fonts: http://www.catswhocode.com/blog/10-wonderful-fonts-you-can-embed-with-cufon-and-sifr

Please note : In the spirit of inclusivity and simply for comparison purposes I have chosen to use both Cufon and Google Fonts in this site. The neatly scripted text you see in some of the twitter feed heading on the top of the page is NOT a Cufon font and is in fact an example of a Google font, a very different technology. Which is significantly very easy to implement but it was not directly integrated with the current theme of this site. You can find out more about Cufon here.

1 Comment

  1. Volker

    Nice summary, thanks!

Leave a Comment

Your email address will not be published. Required fields are marked *