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 p
s 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.