Embedding your font with @font-face

Last night I found out about @font-face, which allows web authors to embed a font into a web page. The only problem here is the browser comparability.
After much research overnight (and some freak outs) I found this jQuery plugin called fontAvailable. It basically creates a dummy span element with a fake font, and then tests it against the input front from the parameter; it checks the width and height for changes.
So after embedding the font with @font-face, the font should act as though the font is installed on the client’s computer.
The tools that I have used to achieve a lightweight embedded fonts are Cufon, jQuery, fontAvailable, and @font-face.

The HTML
<link rel="stylesheet" type="text/css" href="css/style.css" >
<script type="text/javascript" src="js/lib/jquery/jquery-1.3.2.js"> </script>
<script type="text/javascript" src="js/lib/jquery/plugins/jquery.fontavailable-1.1.js"> </script>
Note: The Cufon library is dynamically loaded with jQuery

The CSS
@font-face {
font-family: Kartika;
src: url(kartika.ttf) format('truetype');
}

The JavaScript
if (!$.fontAvailable('Kartika')) {
// load the cufon library
$.getScript('js/lib/cufon/cufon.js', function() {
// load the font
$.getScript('js/lib/cufon/Kartika_400.font.js', function() {
Cufon.replace('#nav ul li a');
});
});
}
It’s important to have the font file loaded in the callback after loading the Cufon library, and same thing goes for applying the fonts.

Edit:
So it turns out that dynamically loading the javascripts doesn’t work in Internet Explorer (haven't tested it in others) so it’s best to load the Cufon library and it’s font files with the script tags.