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.