Web Design Tips: Cufón is a Fast Font Replacement Solution

An easy-to-implement JavaScript called Cufón allows web designers to quickly embed visually interesting fonts on their web pages, opening up new opportunities for typographical design elements.

Every medium has constraints. For print, there are things like size, ink density, and paper quality. For video, even the best available HDTV only musters up about 2.1 megapixel resolution (HD 1080p is 1920 pixels by 1080 pixels). On the Internet, those constraints can be things like bandwidth, screen size, or—today’s topic—fonts.

Every computer has some number of fonts installed. The most common of these are generally referred to as “web safe,” meaning you can be pretty sure that if you specify one of these common fonts in your CSS or HTML, the person who visits your page will see the font face you defined. But this can be limiting. What if you want a custom font that almost no one will have installed?

In this “Web Design Tips,” I am going to describe one possible way to do font replacement, and show you how to implement it with Cufón.

What Is Cufón?

Helsinki, Finland-based web guru, Simo Kinnunen developed a solution to web font replacement called Cufón. The solution requires you to convert a standard True Type (TTF), Open Type (OTF), Pointer Font Binary (BFP), or PostScript font file into a proprietary scalable vector graphic (SVG) font format. The SVG file is then converted to vector markup language (VML), which is an application of XML that browsers can use to display (draw) images. Next, the VML is converted to JavaScript Object Notation (JSON) and JavaScript functions, so that it can be embedded in a web page using a simple <script> tag.
As complicated as this sounds, the conversion is automated, making it very easy.

Once converted, Kinnunen’s rendering engines display the VML glyphs (a pictorial form) on the page. While this is certainly an over simplification, you can think of Cufón as a tool that tells your web browser how to draw the characters of the font. Ultimately, Cufón allows a web designer to specify almost any font, allowing for a much broader range of design possibilities.

Using Cufón

To use Cufón, you’ll need to take four quick and simple steps:

1. Download cufon.yui.js from http://cufon.shoqolate.com and place it in your website’s file hierarchy.
2. Convert your font at http://cufon.shoqolate.com/generate/ and place the converted font file in your website’s file hierarchy. (Be sure that you have a right to embed the font. Most fonts are licensed, you need to ensure that you have a license that permits you to embed.)
3. Call the font and cofun.yui.js files into your page.
4. Specify which page elements should have the converted font.

   <code>  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
     &lt;html&gt;
      &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
        &lt;script src="cufon-yui.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script src="Frutiger_LT_Std_400.font.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
          Cufon.replace('h1');
        &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;This text will be shown in Frutiger LT Std.&lt;/h1&gt;
       &lt;/body&gt;
      &lt;/html&gt;
   </code>