When should you use Cufon or @font-face?

14 June 2011

Well, in my opinion this question is fairly easy to be answered.

Use cufon for titles and little amounts of text that changes a lot, and use @font-face for body text only.

And why? Well, font-face is faster, but more ugly since (most) operating systems don't anti-alias (smoothen) the fonts and custom fonts look plain ugly when the're not aliased. So, if you'd like nice titles on your page with that one nifty font and you also want it to look like your photoshop desing, then you would use Cufon.

However you need to be carefull when using Cufon because there are a few downsides in using this technique. What Cufon does is replace the text you want to be nice with a canvas and "paint" your nice font in this canvas. This is no problem, but the search function of your browser does nog work as you would expect. The searched for text is still found, but not higlighted.
You'll have to concider if the text you want to Cufonize needs to be found when searched on. A while ago I used Cufon in a PHPBB forum and replaced the topictitles with a nice font. That was no problem, but I also replaced the titles in the topic overview. This was wrong, because it turned out a lot of people tend to use the browsers search function in such topic overviews, especially the topiclists in the "view unread posts" overview.
Second concideration; if your page needs to be lightning quick, don't use Cufon. The rendering of all text requires quite a lot of time and power. It will not slow down your page a lot, but sometimes (milli)seconds count and in that case: try not to use a lot of Cufon.

In short:

Use @font-face when a lot of text needs to be a custom font and if the font-size stays below something around 16 pixels. Use Cufon when being nice and shiny is the most important factor.
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!


  1. Gravatar


    01 January 1970

    Sounds right. I tried using @font-face for titles and it just didn't look right. And cufon for text paragraphs can be annoying whilst selecting text.

    I do always use the cufon.now function so cufon loads properly without first showing the original text. Makes the loading progress seem a lot more smooth.

  2. Gravatar


    01 January 1970

    Thanks Rob, it is indeed recommended to always use cufon.now() to better render the texts in Firefox