Cufón vs. Typeface.js, which one is better?

Javascript, 23 March 2009, 4 minute read

Cufón and Typeface.js are both methods to show text in custom fonts (like sIFR), are both only a couple of months old and both use canvas or VML. So what’s the difference? And which one is better?

How does it work? #

Cufón and Typeface.js both work by converting a regular font file into an internal format. On execution, they display the font using Canvas in modern browsers, and VML in Internet Explorer. The benefits of doing it this way is that you do not need to load the Flash plugin. This makes it faster compared to sIFR, and visible on more computers.

Quick stats #

Cufón and Typeface are very similar, here’s a quick list of their properties:

	Cufón	Typeface.js
File size	14.0kb (compressed)	16.3kb (uncompressed)
Supported browsers	Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome and Internet Explorer6+	Firefox 1.5+, Safari 2+, and Internet Explorer 6+, but not 8
Supported file types	.ttf, .otf, PFB, postscript	.ttf
Supported font styling	font-size, font-style, font-weight, line-height, text-shadow, color	font-size, font-style, font-weight, font-stretch, letter-spacing, line-height
Selectable text?	not yet	not yet
	Cufón	Typeface.js

Font Conversion #

Both Typeface.js and Cufón have an online font converter:

You upload your font, select which glyph groups (which are sets like uppercase, lowercase, numbers, punctuation etc.) you want to include and it returns a .js file containing your font. Typeface.js only supports TrueType (.ttf) fonts. Cufón also supports OpenType (.otf), Printer Font Binary and postscript. The converter for Typeface.js has a build-in check for the font license, and will refuse to convert any font that doesn’t allow embedding.

On uploading, Typeface.js forwards to a page where you can select your glyphs and download your file. Cufón lets you select the glyphs on the first page, and also give you the option to include a bold and an italic variant in the same file. Besides that, it allows you to restrict usage to certain domains, and set the quality of the font (lower quality is faster performance).

I used both to convert Optimer with uppercase, lowercase, numerals, punctuation and extended latin. Cufón’s file is called Optimer_400.font.js and is 27.3kb while Typeface.js’ file is called optimer_regular.typeface.js and is 68.7kb.

Including Cufón or Typeface.js in your website #

Cufón and Typeface.js both work by linking to their javascript file and the font file in your <head>:
Cufón

<head>
  …
  <script src="cufon-yui.js" type="text/javascript"></script>
  <script src="Optimer_400.font.js" type="text/javascript"></script>
  …
</head>

Typeface.js

<head>
  …
  <script src="typeface-0.11.js" type="text/javascript"></script>
  <script src="optimer_regular.typeface.js" type="text/javascript"></script>
  …
</head>

To select which elements to convert, you have to add the following <head> for Cufón:

<script type="text/javascript">
  Cufon.replace('h1');
  //If you also include a library, you can add complex selectors like #content h1
</script>

Typeface.js does things a bit differently, and in my opinion, easier. Typeface.js automatically changes all heading elements that reference Typeface.js fonts (which is the first part of your font file name, in our case optimer, and any element that has the class typeface-js:

<div class="myclass typeface-js">
…
h1,  h2 {
  font-family:optimer;
}

Multiple fonts #

Both Typeface.js and Cufón allow you to load in multiple fonts. Typeface.js finds them automatically when you specify them in your CSS, and Cufón allows you to use multiple fonts by specifying the font-family in it’s initial function:

Cufón.replace('h2', { fontFamily: 'Qlassik Medium' });

Internet Explorer 7 #

No party would be complete without someone trying to ruin it for everyone, so here’s internet explorer’s problem: for both Cufón and Typeface.js, the script can have a couple of milliseconds of delay, causing the text to ‘flicker’. To stop it from doing so, place the following code right before the closing </body> body tag:

Cufón:

<script type="text/javascript"> Cufon.now(); </script>

Typeface.js

<script type="text/javascript"> _typeface_js.renderDocument(); </script>

Side by Side #

Of course, all this is fun, but it would be nice to see them in action besides each other. No worries, I’ve made a Demo Comparison Page.

On rendering, you can see a number of spacing differences. There are especially noticeable when looking at the spacing in the typographic scale, where Cufón performs much better than Typeface.js

Conclusion #

Which one is better? Cufón or Typeface.js? In terms of functionality, the difference is small. Cufón supports more filetypes, Typeface.js supports more CSS properties. Both however, support the stuff you’re most likely to need. Typeface.js is easier to use (just use the right font-family and, if it’s not a header, add a class), Cufón is about 40kb smaller in total and handles spacing better out of the box.

For now, Cufón performs slightly better due to handling spacing better, but I don’t think there is a clear winner. That just means that the race is on: the first one to add selectable text wins!

Next Week #

Come back next week for an article on how to combine these techniques with @font-face!

Translations #

Belorussian translation

Kilian Valkhof

Building tools that make developers awesome.