Web Design Tips: Cufn is a Fast Font Replacement Solution

JUNE 17, 2009 A RMA NDO ROGGIO

An easy-to-implement JavaScript called Cufn 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, ortodays topicfonts.
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 Cufn.

Video: Using the Cufn Font Replacement Solution

What is Cufn?
Helsinki, Finland-based web guru, Simo Kinnunen developed a solution to web font replacement called Cufn. 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, Kinnunens rendering engines display the VML glyphs (a pictorial form) on the page. While this is
certainly an over simplification, you can think of Cufn as a tool that tells your web browser how to draw the characters
of the font. Ultimately, Cufn allows a web designer to specify almost any font, allowing for a much broader range of
design possibilities.

Using Cufn
http://www.practicalecommerce.com/articles/1150-Web-Design-Tips-Cufon-is-a-Fast-Font-Replacement-Solution

1/3

Web Design Tips: Cufn is a Fast Font Replacement Solution Practical Ecommerce

To use Cufn, youll need to take four quick and simple steps:
1. Download cufon.yui.js from http://cufon.shoqolate.com and place it in your websites file hierarchy.
2. Convert your font at http://cufon.shoqolate.com/generate/ and place the converted font file in your websites 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.d

&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>