JS Plugins JavaScript jQuery Markup Methods

@font-face Instead of Cufon

With modern browser support for @font-face improving significantly, it's worth considering it as a replacement for Cufon — the JavaScript-based font rendering library that was popular when browsers didn't support custom fonts natively.

Using @font-face:

@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont.eot');
    src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/myfont.woff') format('woff'),
         url('fonts/myfont.ttf') format('truetype'),
         url('fonts/myfont.svg#MyFont') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3 {
    font-family: 'MyFont', sans-serif;
}

Detecting font availability with jQuery:

The jquery-fontavailable plugin lets you check whether a font has loaded successfully, which is useful for showing a fallback while the custom font loads.

$(document).ready(function() {
    if ($.isFontAvailable('MyFont')) {
        $('h1').css('font-family', 'MyFont, sans-serif');
    }
});

Cufon vs @font-face:

Cufon renders text as canvas/VML shapes — it works everywhere but has drawbacks: no text selection, poor accessibility, slower rendering. The @font-face approach is native, allows text selection, works with screen readers, and performs better. Unless you need IE6 support, @font-face is the better choice.