Kilian Valkhof

Front-end & user experience developer, Jedi.

Combining Cufón and @font-face

CSS & HTML, 6 April 2009

Everyone wants @font-face to work everywhere, but as it stands, it only works in Safari and the upcoming versions of Firefox and Opera. In this article I’ll show you how to use Cufón only if we can’t load the font through other, faster methods.

If you’re not familiar with Cufón, check out my previous article: Cufon vs. Typeface.js, which one is better? or this article: Exploring Cufón, a sIFR alternative for font embedding by Cameron Moll.

Not just @font-face…

Now, @font-face isn’t the only way to display custom fonts. What if the visitor already has the font installed? It’ll display automatically then, again leaving us with no reason to use load Cufón. These are the three options you have when you want to display custom fonts, in order of speed:

I will not go into @font-face in this post, for more on web fonts, read these articles: CSS at ten and @font-face in IE: making web fonts work (Which not only explains how to use @font-face in browsers that support it, but also in IE using their proprietary DRM-ed .eot ‘standard’.)

The trick

The effect of an installed font and using @font-face are the same: The font is rendered and displayed natively by the browser. This means that you only have to check if the font is available, and can forgo checking if @font-face is at all an option. A very smart solution to do this is the jQuery fontAvailable plugin. The implementation looks like this:

$(document).ready(function() {
    if($.fontAvailable('Optimer')) {
        // code here
    }
});


The plugin works in a most ingenious way: On document load, it created an element with the alphabet in it, and sets the font-family to a non-existent font to apply the default font. It then replaces the font-family with the font you've specified, and checks if the width has changed. If the width has changed, that means the font was applied and is available.

Update: Eneko Alonso ported the plugin to mootools: moo-fontavailable. Cool no?

So, all you have to do to make this work, is make sure that the font-name you define in your @font-face declaration is the same as the real font name, and it will automatically work for both already installed fonts, and fonts loaded in with @font-face!

And then Cufón

So, with an @font-face declaration in your CSS, and a bit of JavaScript telling you if the font is available, all you have to do is add in @cufón when $.fontAvailable returns false! (Note the added ! in the example code, so Cufón gets executed if the font is not available)

$(document).ready(function() {
    if(!$.fontAvailable('Optimer')) {
      Cufon.replace('h1');
    }
});

Unfortunately it's not quite that easy. Because IE can show a FOUC with Cufón, you have to add Cufon.now(); at the end of the page. If we use Cufón from within $(document).ready();, that would make Cufon.now(); ineffective because it would actually be parsed before the document is ready, and thus before the initial Cufon.replace(); function.

It will still work, but IE users might see the font getting changed while the page is loaded. Over at the Google group, they are already working on a solution to this, so it shouldn't be long before you won't need Cufon.now(); at all anymore.

That's all there is to it

All in all, it's quite simple. Check if the font is available, either through already being installed or through @font-face, and if it isn't, we'll let Cufón display it. This offers you the best of both worlds, because browsers that support @font-face will have their native text, and browsers without @font-face support will still get custom fonts.

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. […] Combining Cufón and @font-face • CSS & (X)HTML • Kilian Valkhof. “Everyone wants @font-face to work everywhere, but as it stands, it only works in Safari and […]

  2. Oxide

    Great article. So simple and i never thought about that!

  3. I’ve been toying with Cufon for a while now and it seems the larger your page, the more likely you are to see a flash of unstyled content in ANY browser. To solve this issue. I simply employ some CSS just under the opening <body> tag that looks like this:

    <style>#nav,.date{visibility: hidden}</style>

    Then I simply switch it back to normal just before the </body> tag:

    <style>#nav,.date{visibility: visible}</style>

  4. Excellent write up and technique, now if only those pesky font-licensing problems weren’t an issue…

  5. I just ported the jQuery plugin to Mootools:
    http://code.google.com/p/moo-fontavailable/

    Hope you find it useful :)

  6. […] Combining Cufón and @font-face […]

  7. This is great. One caveat when using it with Safari: it seems the jQuery’s document.ready runs before the Web font is fully loaded, so this technique didn’t work for me unless I inserted a small delay. Not sure if this is a Safari 4 beta (5528.16) bug or not. Any ideas?

  8. Rick

    Cool idea.

    Now if you could only download the cufón javascript and vectorized fonts when needed. Probably too much to ask.

  9. @Rick, That would technically be possible, but since they are quite large files, it would take a noticeable amount of time for them to load, and thus cause a delay for the people that will not have @font-face. I chose on purpose not to do that

    @Jason, it’s probably possible to check for the onload event on the cufon font file as well, which is probably a smarter idea. I’ll see if I can work it into the example, thanks!

  10. @Kilian, I assume you mean to check for the onload event on the Web font file, as I that’s what Safari 4 beta uses. Not sure if this is possible, but good luck anyway :-)

  11. BARTdG

    Thanks, Kilian! This is exactly what I needed. A great technique to spend my Saturday evening with :)

  12. […] Combining Cufón And @Font-Face […]

  13. […] Combining Cufón and @font-face […]

  14. […] 表示しているブラウザで指定したフォントが使用可能かどうかを調べるためにRemy Sharpさんが作ったfont.jsを利用しました。 (Kilian ValkhofさんのサイトではfontAvailable.jsを使用していますが、どうにも@font-faceで指定したフォントがうまく認識されませんでした。) […]

  15. […] Combining Cufón and @font-face • CSS & (X)HTML • Kilian Valkhof (tags: css useful resources webdiss typography) […]

  16. Very useful !
    I just ported the plugin to Prototype :)

    Available here
    http://github.com/jblanche/prototype-fontavailable

  17. That is super helpful. I’ve implemented this on my site.

  18. Johannes

    Thanks for the great sum-up. I was just thinking about this solution and then I thought “Hey someone else must have come up with this idea before, so google it!” ;-)

    Cheers,
    Johannes

  19. […] The other thing to note: Fallbacks. Cufón and typeface.js are both good options for when @font-face isn’t supported. Kilian Valkhof has a great article on combining Cufón and @font-face. […]

  20. Ced

    Do you know why Cufon looks so thin compared to @font-face ? Example : http://bit.ly/1eJPhh

  21. […] and CSS. More recently, there’s been quite a bit of talk about Cufón (including how to combine it with @font-face), which uses canvas instead of Flash and aims to be easier to set up than sIFR (which has certainly […]

  22. […] con la tipografía web en la práctica, Combining Cufón and @font-face, que explica cómo hacer exactamente eso: combinar el uso de @font-face en los navegadores que lo […]

  23. Web-fontit, @font-face sekä erilaiset fontin korvaus menetelmät vertailussa…

    Tässä artikkelissa vertailen erilaisia fontin korvaus -menetelmiä, joilla webissä saadaan mikä tahansa fontti käyttöön. @font-face tuen yleistyminen selaimissa tuo mukanaan ominaisuuden, jolla erikoisten fonttien käyttäminen helpottuu. Kuitenkin niin k…

  24. […] pd: lo mejor creo que es combinar cufón y @font-face […]

  25. […] Combining Cufón and @font-face […]

  26. […] not yet final, so your CSS might not validate, but you can start including it in your work. (And here is an article on how to make @font-face work with Cufon so the js only gets executed if the user has a browser […]

  27. […] Combining Cufon and @font-face […]

  28. […] Combining Cufon and @font-face […]

  29. […] técnica es ideal para complementar el trabajo de Cufón, ya que nos permitirá comprobar si la fuente no existe para ejecutar el […]

  30. […] técnica es ideal para complementar el trabajo de Cufón, ya que nos permitirá comprobar si la fuente no existe para ejecutar el […]

  31. […] Esta técnica es ideal para complementar el trabajo de Cufón, ya que nos permitirá comprobar si la fuente no existe para ejecutar el script. […]

  32. […] http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/ Written by hagin on November 12, 2009 at 12:01 pm […]

  33. I’m sure you’ve figured this out already, but since no one posted it… fontsquirrel.com has @font-face kits with the ttf/otf, eot, and css files with all the declarations. IE has supported embedding forever, so the only people left out in the cold are those with other browsers who refuse to upgrade…

  34. Fil

    Very nice !
    But I noticed a problem in a special situation. I have uploaded a font called Quicksand on fontsquirrel.com.
    The exact font-name on the css file is “QuicksandLight”, but if I use this font-name in the jquery script, only the property font-face is supported and cufon doesn’t work at all on browsers such opera or chrome.
    However, if I use the font-name “Quicksand Light” in the css and jquery, only the cufon script is supported. Font-face is completely ignored on FF or Safari and only cufon is supported even on those browsers!!!

    Do you have any idea why ?

    Thanks

  35. […] http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/ Categories: Kiến Thức — Thiết Kế Thẻ:cufon, font, font-face, sIFR Phản hồi (0) Trackbacks (0) Để lại phản hồi Trackback […]

  36. I had exactly the same problem as you, Fil. I tried every possible name, even opened the file in Fontforge to see what the font file called itself, but it didn’t do the trick.

  37. Guillem

    @font-face work everywhere, even on IE5 :

    @font-face {
    font-family: ‘QuicksandBook’;
    src: url(‘Quicksand_Book.eot’);
    src: local(‘Quicksand’), local(‘QuicksandBook-Regular’), url(‘Quicksand_Book.woff’) format(‘woff’), url(‘Quicksand_Book.ttf’) format(‘truetype’), url(‘Quicksand_Book.svg#QuicksandBook-Regular’) format(‘svg’);
    }

  38. […] about testing out and documenting my experience combining Cufon and @font-face as described in this article written by Jedi Kilian Valkhof…but I much prefer Angel’s idea of doing something […]

  39. […] Simple, ¿verdad? Esto se puede lograr mediante una simple estructura de if y else. Para todos aquellos que no sean unos cracks de la programación (entre los cuales me incluyo yo), aquí tienen el proceso paso a paso. […]

  40. […] Combining Cufón and @font-face • CSS & (X)HTML • Kilian Valkhof So, with an @font-face declaration in your CSS, and a bit of JavaScript telling you if the font is available, all you have to do is… […]

  41. […] nämä käyttäjät haluaa erotella, löytyy tähänkin tapa. Tätä aihetta on käsitelty Cufónin osalta Kilian Valhofin blogissa. Kyseinen blogiartikkeli esittelee jQueryn lisäosan nimeltään fontAvailable ja tämän käytön […]

  42. […] An article about combining Cufon and @font-face techniques […]

  43. […] older browsers? Then cufón might help. You can even combine cufón and @font-face with the help of this tutorial. Please note, I still haven't tried cufón. The demo sites look good […]