javascript - Using Cufon and @font-face together -

i think time of using custom fonts in web widely! best , easiest way add custom fonts website cufon. easy use , cross-browser. support ie5.5 !!! anyway force client download massive script font , user can't use "find" , "zoom" functions in browser properly. on other hand @font-face supported days , it's more semantic. here spoke @font-face browser support , other issues.

my question how use @font-face , cufon , deliver custom fonts more clients best performance. should not load cufon's custom scripts when can load custom font via @font-face , should not load custom font in client side when prefer using cufon in targeted client. (think have system/browser supports @font-face preffer using cufon).

i'm asking write script based on @font-face support , other factors developer prefers , loads cufon or custom font. here great @font-face detector:

/*!  * isfontfacesupported - v0.9 - 12/19/2009  * http://paulirish.com/2009/font-face-feature-detection/  *   * copyright (c) 2009 paul irish  * mit license  */  var isfontfacesupported = (function(){       var fontret,         fontfacecheckdelay = 100;          // ie supports eot , has had eot support since ie 5.         // proprietary standard (atow) , off-spec,         // proprietary test acceptable.      if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true;      else {      // create variables dedicated @font-face test       var doc = document, docelement = doc.documentelement,            st  = doc.createelement('style'),           spn = doc.createelement('span'),           wid, nwid, body = doc.body,           callback, iscallbackcalled;        // following font, containing - character. ethan dunham.       st.textcontent = "@font-face{font-family:testfont;src:url(data:font/opentype;base64,t1rutwalaiaaawawq0zgima92iqaaavaaaaayuzgve1vevesaaaglaaaabxhrevgadaabaaabgwaaaagt1mvmlbht5saaaegaaaaygntyxaatqpnaaad1aaaaupozwfk8qmkmwaaalwaaaa2aghlyqs/bdgaaad0aaaajghtdhghkqaaaaagsaaaaaxtyxhwaanqaaaaargaaaagbmftzr8kcumaaagaaaacunbvc3t/uaayaaafiaaaacaaaqaaaaeaqvtdum9fdzz1aasd6aaaaadhuuogaaaaamds44yaaadzaz8bdgaaaagaagaaaaaaaaabaaabdgdzaakdqqaaaaadpwabaaaaaaaaaaaaaaaaaaaaawaauaaaawaaaaicmggqaauaaak8aooaaacmarwcigaaad0amgd6aaaaaaaaaaaaaaaaaaaaaqaaaaaaaaaaaaaaaeziraaaqaagac0c7v8gaaabdv8naaaaaqaaaaaaaaaaacaaiaabaaaafad2aaeaaaaaaaaapab6aaeaaaaaaaeaagc9aaeaaaaaaaiabwdqaaeaaaaaaamaeqd8aaeaaaaaaaqaawewaaeaaaaaaauabqemaaeaaaaaaayaageyaaeaaaaaaa0aaqe5aaeaaaaaabaaagfbaaeaaaaaabeabwfuaamaaqqjaaaaeaaaaamaaqqjaaeabac3aamaaqqjaaiadgdaaamaaqqjaamaigdyaamaaqqjaaqabgeoaamaaqqjaauacgeaaamaaqqjaayabaesaamaaqqjaa0aage1aamaaqqjabaabae7aamaaqqjabeadgfeaecazqbuaguacgbhahqazqbkacaaaqbuacaamgawadaaoqagagiaeqagaeyabwbuahqatabhagiaiabtahqadqbkagkabwauacaaqwbvahaaeqbyagkazwboahqaiabpag4azgbvacaacablag4azabpag4azwauaabhzw5lcmf0zwqgaw4gmjawosbiesbgb250tgfiifn0dwrpby4gq29wexjpz2h0igluzm8gcgvuzgluzy4aafaasqaauekaafiazqbnahuababhahiaafjlz3vsyxiaaeyatwboafqatabbaeiaogbpafqargbfafgauabpafiavaaark9ovexbqjppvezfwfbpulqaafaasqagaabqssaaadealgawadaamaaams4wmdaaafaasqaauekaacaaacaaafaasqaauekaafiazqbnahuababhahiaafjlz3vsyxiaaaaaaaadaaaaawaaabwaaqaaaaaaraadaaeaaaacaaqakaaaaayabaabaaiaiaat//8aaaagac3////h/9uaaqaaaaaaaaaaaqyaaaeaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaqaaaaaaaaaaaaaaaaiaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadaaaaaaaa/7uamgaaaaaaaaaaaaaaaaaaaaaaaaaaaqaebaabaqeduekaaqiaaqau+baa+bsb+bwc+b0d+bgewqwdi/eh+dp4cgucaiwphaaaebwakrecab4cakssaamcaaeapqa/aefhzw5lcmf0zwqgaw4gmjawosbiesbgb250tgfiifn0dwrpby4gq29wexjpz2h0igluzm8gcgvuzgluzy5qsvbjaaaaaaeadgadaqecaxqodvb3h/cxafehbpnt9xf90wyo+igu+wovhgodlix/damldar3fwr3fwwmhgog/wwsaaaaaaeaaaaoaaaagaaaaaaaagabaaeaagabaaqaaaacaaaaaaabaaaaambulpkaaaaax1kuiqaaaadhupsjafqaaah0aaadqqaa)}";       doc.getelementsbytagname('head')[0].appendchild(st);         spn.setattribute('style','font:99px _,serif;position:absolute;visibility:hidden');         if  (!body){         body = docelement.appendchild(doc.createelement('fontface'));       }         // data-uri'd font has - character       spn.innerhtml = '-------';       spn.id        = 'fonttest';        body.appendchild(spn);       wid = spn.offsetwidth;        spn.style.font = '99px testfont,_,serif';        // needed cssfontfacerule false positives (ff3, chrome, op9)       fontret = wid !== spn.offsetwidth;        var delayedcheck = function(){         if (iscallbackcalled) return;         fontret = wid !== spn.offsetwidth;         callback && (iscallbackcalled = true) && callback(fontret);       }        addeventlistener('load',delayedcheck,false);       settimeout(delayedcheck,fontfacecheckdelay);     }      function ret(){  return fontret || wid !== spn.offsetwidth; };      // allow callback     ret.ready = function(fn){       (iscallbackcalled || fontret) ? fn(fontret) : (callback = fn);     }        return ret; })(); 

i want function this:

if(isfontfacesupported()==true && wewantfontfacehere==true){  //add @font-face css , prevent cufon } else{ //use cufon } 

my question how part:

add @font-face css  

sorry bad english.

jquery has function fontavailable can check if fontface font loaded:

$(document).ready(function() {     if(!$.fontavailable('fontfacefontname')) {         // cufon replace code     } });