Text replacement with Cufón

For a very long time, the web was filled with very plain fonts.

Unpleased with this lack of variety, a group of developers invented sIFR, which used Javascript and Flash to replace boring text with lively fonts. But sIFR had a problem: not everyone liked or used Flash. It was also slow.

Then, David Chester created typeface.js. typeface.js was brilliant in that it was purely Javascript, with no Flash involved. But typeface.js was slow to load and required large files.

And most recently from Simo Kinnunen came cufón, which we will look at here.

About

Like typeface.js, cufón is Javascript only, which means that you avoid all the problems of Flash. cufón‘s full size is ~26kb, while the default download, which is compressed with YUI, is 14kb. It is supported by most modern browsers, and Internet Explorer 6 as well.

One of the best things about cufón is it’s incredible speed. Before it, mass text replacement wasn’t very practical, as both sIFR and typeface.js took a while to work their magic. With cufón, huge blocks of text are rendered in less than half the speed of the other two. You can take a look at our demo, in which we have several medium and long paragraphs replaced using cufón.

Usage

Using cufón is very simple. First, you download the core Javascript file. Then, you generate a Javascript font file by uploading a font of your choice in TrueType (ttf), OpenType (otf), Printer Font Binary (PFB), or PostScript (ps). Afterwards, you can choose which glyphs you wish to include in the Javascript file. The generated files are usually around the 20-25kb region, assuming basic glyphs. With more glyphs, it may grow to around 40kb.

Compare this process to sIFR which requires you to convert the font to a flash movie. Not only does this take more time than necessary, sIFR also needs the font to be downloaded again and again for different sections of replaced text, increasing load time. typeface.js, like cufón, uses a Javacript font file, but these are quite a bit larger, usually start around 60kb.

After generating the font file, you simply import both the cufón and the font Javascript files:

<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="Your_Font_400.font.js"></script>

After that, you call cufón to replace your desired selector:

<script type="text/javascript">
	Cufon.replace('p');
</script>

If you have a Javascript library or framework such as jQuery imported, cufón can take advantage of its selectors. For example, if you had jQuery imported, you could do:

<script type="text/javascript">
	Cufon.replace('#cufon p');
</script>

Cufón also supports multiple fonts. For example, let’s say you wanted your h1 to have ABC font and your ps to have XYZ font. You would do the following:

<script type="text/javascript">
	Cufon.replace('h1', { fontFamily: 'ABC' });
	Cufon.replace('p', { fontFamily: 'XYZ' });
</script>

How it Works

Cufón uses a Javascript font file containing mappings of the symbols of the font. When called, it replaces the contents of the specified element(s) with the canvas element in modern browsers, and VML in Internet Explorer. These elements allow the generation of text in non-standard fonts. However, a downside of this is that text highlighting is not supported.

Conclusion

Cufón is very cool, small, and fast. It is supported by most browsers that users will use, and supports multiple font formats. However, it’s implementation does not support text highlighting as of yet. Overall, it is a very nice piece of work and is very easy to use. It shows a lot of promise and should only improve with time.

Go ahead and give cufón a try. I do believe that you will be pleasantly surprised. Feel free to leave any suggestions or experiences in the comments.

Leave a Reply

Text replacement with Cufón