Kilian Valkhof

Front-end & user experience developer, Jedi.

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

Javascript, 23 March 2009

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

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. I think the fact that fontface doesn’t work in IE 8 is a major reason to choose Cufón.

  2. […] Cufón Vs. Typeface.Js, Which One Is Better? […]

  3. Oliv'

    I added a third column to your test page, in order to compare with the output of @font-face.

    The result (on Firefox 3.5) is surprising as @font-face is
    — somewhere in between the Cúfon (1.09) and the TypeFace.js (1.13) renderings
    — so crisp and shows by comparison how blurry are Cúfon and TypeFace.js

  4. While I’m all for using different fonts on the web, you have to ask yourself if it is worth the extra effort to do this?

    Neither of these methods render text that well. It looks blurry (Firefox 3.5). Also, have you tried disabling CSS? You get a duplicate of EVERY word rendered with this. Not good for some situations.

    Also, like you say, you can’t select the text…that’s a bad thing.

    I hate flash, but SIFR does do a good job for this at this time of writing.

    Another method I use is the plain old IMG tag. Yup. Google indexes image ALT text quite well too so there should be no SEO worries so long as you adhere to the correct methods.

    Even if you want to make rendering images as an alternative to text easier, you can simply create a server-side function that takes the text as an argument and outputs an image.

    E.g

    Hopefully CSS3 will do away with this anyway at some point.

  5. …ok, it didn’t render my example. Can your comments not simply escape angle brackets into their character entities instead of simply taking the whole thing out??! Seems like it should be a pretty standard feature on a website dedicated to web design.

  6. Seriously, who’s disabling CSS besides developers? Accessible readers maybe, but they usually have JS disabled anyway so they won’t double up anyway.

  7. Something I learned last night (London Web Standards talk) was that typeface respects ligatures (where 2 letters join together) – which is a bonus for correct display of the font you want to use. That’s got to be a plus for typeface.js

  8. It’s worth noting that Cufon has an autoDetect option that makes using it a breeze.

    Cufón.replace('h1, h2, h3, h4, h5', { autoDetect: true });

    This will automatically Cufon-ize all headings based on the font-family you specify in your CSS. Only those headings with their font-family set to a known Cufon font – will be replaced.

    Only downside is, that autoDetect doesn’t work in Opera – so that no replacement takes place – which IMO is a nice-enough fallback.

  9. Hi guys!
    If you need easily implement Cufon into your WordPress themes I wrote a plugin All-In-One Cufon http://www.sramekdesign.com/wordpress/plugins/all-in-one-cufon/

  10. […] Typography for the web – NY Web Standards Meetup Cufon vs sIFR vs FLIR Cufon vs Typeface.js – Which one is better? […]

  11. great article,
    but I do wonder about the rights issue of converting commercial font and packing them on one`s server…

    say I owe font x from adobe, does that give me the right to convert it on put on web server? my guess probably not :(

    I guess for now one should stick to free fonts

  12. Err I guess I should read the rights infos on cufon website first :)

  13. […] статьи: Cufon vs. Typeface.js, which one is better? AKPC_IDS += "810,"; Понравилась статья? Добавь в закладки или […]

  14. […] Para una comparativa exhaustiva entre los dos sistemas, recomiendo la lectura de Kilian Walkhof "Cufón Vs. Typeface.Js, Which One Is Better?" donde entra en detalles, e incluso tiene una comparativa de renderización entre typeface.js y […]

  15. hi,
    i personally think CUFON is the best.
    http://www.mossawir.net
    i used in my site.

  16. i like CUFON too!

    used it for dynamic Feature Rotator and Specials on home page for a travel agency site (http://shipsandtripstravel.com) and multiple fonts on their testimonials page (http://shipsandtripstravel.com/about/testimonials.html)

    cool stuff!

  17. Nice article! I used only Cufon before and based on this will not change it :) Basically both works well, but in my opinion we should avoid this kind of “hack” if it’s possible because of (full) compatibility and speed.

  18. […] tra loro (su kilianvalkhof.com un tabella comparativa), Cufon e Typeface sfruttano javascript e il tag canvas, non richiedono […]

  19. Tufan

    There are also free font library http://www.cufonfonts.com/

  20. Great blog. Very helpful.

  21. […] Kilian Valkof bietet auf seiner Seite einen interessanten Vergleich zwischen den beiden Alternativen (englisch). Darin wird auch deutlich wie beide Varianten zu benutzen sind. Es bleibt festzuhalten: Die Alternativen zu Arial, Verdana und Tahoma sind vorhanden.Also, worauf wartet ihr noch […]

  22. I made a subpixel version of typeface.js, which enables LCD subpixel rendering on HTML5 canvas capable browsers.

    http://yohng.com/software/subpixel-typeface-js.html

  23. Ivan Petrov

    I see a Belorussian translation link on this page – the translation quality is that of ‘automated translator’ without human correction. Come to think, probably Belorussian translation anyway is as useful as translating it into Irish language.

  24. Maxim Stoyanow

    As for me, quality of this belorussian translation is normal and good enought for understanding (i’m from in Belarus too… know russian and belorussian languages)

  25. Ivan Petrov

    @Maxim Stoyanow: Well, this doesn’t sound to me proper at all. It looks like the text has been piped through google translate or something similar

    Шрыфт пераўтварэння (Font conversion is translated as “the font of conversion”)
    =========
    Вы загрузіць шрыфт, абраць Знак групы (якія ўяўляюць сабою наборы, як загалоўныя, малыя літары, лічбы, знакі прыпынку і г.д.) вы жадаеце ўключыць і ён вяртаецца.

    (All word forms are lost here, and the sentence is a complete gibberish – it sounds like pidgin Chinese variant of English)

  26. Levi

    The demo page doesn’t work at all in IE8. Also the cufon.now() doesn’t fix the flicker for me in IE8.

  27. Most corect solution seems to be to use this as alternative for @font-face for browsers that support it. Waiting for more. Anna

  28. ben

    not sure if I could use cufon or typeface for non-latin fonts like Chinese. Will give it a go in the next project. Anybody has tried that before?

    Ben

  29. Nice article, befor I read it, I’m using Cufon but now i must test a Typface. Thanks!

  30. Thanks for the post. I personally prefer Typface as it is what I have been accustomed to using but a lot of other people from graphic design courses say they prefer Cufon so I might give it a try.

  31. Daniela

    I have used typeface with several fonts and it had worked succefully but NOT with AAAIIGG font. Any idea why could be the problem? Thanks

  32. Simon

    Is it possible to convert Chinese .ttf?

  33. Unfortunately with htm5 n Modernizr 2.5 cufon bugs in ie8 n 7. It displays double fonts. Apparently there is not bug fix for it yet. So, if u want to use html5 techniques n b compatible with ie with cufon, go for html5shiv. You might have to play s bit around if you wish to b compatible with tablets(ipad, etc), but at least works fine. Haven’t tried typefont but i reckon it has the same issue. I’ll try googlefonts tomorrow even if unfortunately they don’t support many fonts, n the few available r quite rubbish!

  34. better is @font-face

  35. Typeface rocks!

  36. Greate pieces. Keep posting such kind of info on your site.
    Im really impressed by your site.
    Hey there, You’ve performed a fantastic job. I’ll definitely digg it
    and for my part suggest to my friends. I am sure they will be
    benefited from this site.