Sin dai problemi causati dall'uso di Cufon mi sono allontanato dall'usare risorse di font esterne, ma ultimamente ho cercato metodi alternativi per caricare i font per vedere se esiste un modo migliore; metodi migliori hanno un modo di apparire dal nulla.

Ci sono molti nuovi metodi là fuori e le variazioni per ogni metodo sembra; Dovrei usare typekit ? o google webfonts (con js o css)? devo continuare a utilizzare i caratteri a caricamento locale (ad esempio, il metodo generato da fontsquirrel.com)?

Di seguito elencherò i metodi che sembrano i più apprezzati, con alcuni test, ma vale davvero la pena passare a un webfont? Sembra che porterebbe un carico di risorse maggiore (richieste http) e avrebbe meno tipi di formato di file (meno compatibilità) ecc. Ma sembra che i file vengano caricati in modo asincrono ed efficiente nella maggior parte dei casi.

1. È solo una questione di situazione e di bisogno? Se sì, quali sono?
2. Ci sono differenze drastiche tra questi metodi?
3. C'è un metodo migliore là fuori che non ho elencato?
4. Quali sono i pro / contro per le prestazioni? Guarda? dipendenze? compatibilità?

Sto davvero cercando le migliori pratiche qui, le prestazioni sono una cosa importante, ma lo sono anche la scalabilità e la facilità d'uso. Per non parlare del look and feel.

Google CSS

• usa solo fogli di stile esterni
• utilizza solo il tipo di file compatibile più piccolo
• puoi usare @importo <link>o prendere il contenuto di styleshee ( @font-face) e metterlo direttamente nel tuo foglio di stile.

risultati del test

  78ms load of html
  36ms load of css

Metodo Google JS

• usa webfont.jsper caricare styleshet
• utilizza solo il tipo di file compatibile più piccolo
• aggiunge :rootelemento con classe
• aggiunge lo script alla testata.

risultati del test

    171ms load of html
    176ms load of js
    32ms load of css

Metodo Typekit

• aggiunge :rootelemento con classe.
• può utilizzare *.jssnippet o file di *.jsfile caricato esternamente
• utilizza data:font/opentypeinvece del file di font.
• aggiunge lo script alla testata
• aggiunge css incorporato a head

• aggiunge un foglio di stile esterno alla testata

  puoi facilmente aggiungere / rimuovere / regolare caratteri e selettori mirati da typekit.com

risultati del test

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

... e il metodo Font Squirrel

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

... o con dati: metodo dei caratteri ...

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light-webfont-f.eot');
}

@font-face {
    font-family: 'open_sanslight';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
         url('opensans-light-webfont-f.ttf') format('truetype'),
         url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

Innanzitutto, chiarirò qualcosa sull'offerta di Google. In realtà caricherà il formato più piccolo che il tuo browser può gestire. WOFF offre file di piccole dimensioni e il tuo browser lo supporta, quindi è quello che vedi. WOFF è anche ampiamente supportato. Tuttavia, in Opera, ad esempio, probabilmente otterrai la versione TrueType del carattere.

La logica della dimensione del file è anche, credo, il motivo per cui Font Squirrel li prova in quest'ordine. Ma questa è principalmente una speculazione da parte mia.

Se stai lavorando in un ambiente in cui ogni richiesta e ogni byte conta, dovrai fare un po 'di profilazione per scoprire quale funziona meglio per il tuo caso d'uso. Le persone visualizzeranno solo una pagina e non visiteranno mai più? In tal caso, le regole di memorizzazione nella cache non sono così importanti. Se stanno navigando o tornando, Google potrebbe avere regole di memorizzazione nella cache migliori del tuo server. La latenza è il problema più grande o la larghezza di banda? In caso di latenza, punta a meno richieste, quindi ospitalo localmente e combina i file il più possibile. Se la larghezza di banda, andare con qualsiasi opzione finisce con il codice più piccolo e il formato di carattere più piccolo.

Ora, passiamo alla considerazione CSS vs JS. Diamo un'occhiata al seguente pezzo di HTML:

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

In molti casi, script1, style1, e style2sarebbe il blocco. Ciò significa che il browser non può continuare a visualizzare il documento fino a quando la risorsa non è stata caricata (sebbene i browser moderni lo confondano un po '). Che può effettivamente essere una buona cosa, soprattutto con i fogli di stile. Impedisce un lampo di contenuto non stilato e impedisce anche il cambiamento gigantesco che si verificherebbe quando si applicano gli stili (e lo spostamento del contenuto è davvero fastidioso come utente).

D'altra parte, script2non sarebbe il blocco. Può essere caricato in seguito e il browser può passare all'analisi e alla visualizzazione del resto del documento. Quindi anche questo può essere utile.

Parlando specificatamente dei caratteri (e ancora più specificamente, dell'offerta di Google), probabilmente mi atterrei a un metodo CSS (mi piace @importperché mantiene lo stile con il foglio di stile, ma potrei essere solo io). Il file JS caricato dallo script ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) è più grande della @font-facedichiarazione e sembra molto più lavoro. E non credo che il caricamento del carattere stesso (WOFF o TTF) stia bloccando, quindi non dovrebbe ritardare troppo le cose. Personalmente non sono un grande fan dei CDN, ma il fatto è che sono DAVVERO veloci. I server di Google sconfiggeranno la maggior parte dei piani di hosting condiviso e, poiché i loro caratteri sono così popolari, le persone potrebbero persino averli già memorizzati nella cache.

Ed è tutto quello che ho.

Non ho esperienza con Typekit, quindi l'ho lasciato fuori dalla mia teoria. Se sono presenti inesattezze, senza contare le generalizzazioni tra i browser per motivi di argomento, si prega di segnalarle.

Penso che tu abbia affrontato molto bene i tempi di caricamento nella tua domanda. Dal mio punto di vista, ci sono alcune fonti che dovrebbero essere aggiunte all'elenco e alcune altre considerazioni che dovrebbero essere esaminate per avere una visione completa delle opzioni.

Alcune altre fonti di font affidabili

cloud.typography

http://www.typography.com/cloud/

Da quello che posso dire, i caratteri sono incorporati come dati in un file CSS:

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
} 

Ecco le mie specifiche:

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

Ecco la loro descrizione di altissimo livello della loro distribuzione .

Fonts.com

Non ho usato questo servizio, ma sono un fornitore di font molto affermato e le informazioni che hanno elencato sul loro sito sono piuttosto impressionanti. Non ho specifiche sui loro metodi esatti, ma ecco cosa so che hanno:

• Alcuni dei caratteri più famosi al mondo disponibili
• Una libreria di font davvero grande (oltre 20.000)
• Download di font sul desktop per la creazione di mockup
• Uno strumento personalizzato per testare i caratteri web nel browser
• Controlli e sottoinsiemi di tipografia raffinati
• Opzioni di auto-hosting

FontSpring

Affiliato con FontSquirrel. I caratteri possono essere acquistati qui per un prezzo fisso. I file dei font e un CSS di accompagnamento vengono forniti, da distribuire sul tuo server, proprio come FontSquirrel.

Specifiche estese

Per quanto riguarda i pro e i contro complessivi di ciascun servizio di font, ecco alcuni confronti:

Dimensione della libreria dei caratteri

• Fonts.com : 20.000
• FontSpring : 1000+
• FontSquirrel : 300+
• Google : 600+
• Typekit : 900+
• Typography.com (cloud.typography.com): probabilmente 300+ (35 famiglie)

Prezzi

• Fonts.com : $ 20 / mese per 500.000 pagine visualizzate
• FontSpring : varia in base al tipo di carattere (acquisto di caratteri una tantum)
• FontSquirrel : gratuito
• Google : gratuito
• Typekit : $ 4 / mese per 500.000 visualizzazioni di pagina
• Typography.com : $ 12,50 / mese per 1.000.000 di visualizzazioni di pagina

Qualità dei caratteri

La qualità dei caratteri web può variare notevolmente. Questo può comprendere cose come le lettere stesse o la spaziatura o la dimensione del set di caratteri. Tutti questi determinano l'impressione generale di qualità che un carattere darà. Sebbene le opzioni gratuite abbiano alcune buone opzioni, hanno anche alcuni caratteri che non sono di alta qualità, quindi è necessario scegliere attentamente da quelle fonti.

• Fonts.com : alto
• FontSpring : da misto ad alto
• FontSquirrel : misto
• Google : misto
• Typekit : alto
• Typography.com : Molto alto (lo desidero "molto alto" perché Fonts.com, FontSpring e Typekit supportano più fonderie di tipi, dove si tratta solo di caratteri della fonderia H&FJ, che è tra i migliori al mondo)

Qualità dei caratteri II: tipografia

Ci sono molti perfezionamenti nella tipografia desktop che sono stati davvero difficili da ottenere nei caratteri web. Alcuni di questi servizi offrono modi per fornirli.

• Fonts.com : crenatura, spaziatura delle lettere, legature, caratteri alternativi, frazioni, ecc.
• FontSpring : Nessuno
• FontSquirrel : Nessuno
• Google : nessuno
• Typekit : Nessuno
• Typography.com : maiuscoletto, legature, caratteri alternativi, stili di numeri alternativi, frazioni, ecc.

Supporto del browser

Ciò dipende principalmente dai formati dei caratteri supportati da ciascun servizio. I principali sono:

• EOT: per Internet Explorer (IE 4+)
• TrueType e OpenType: formati tradizionali (Safari 3.1+, FF 3.5+, Opera 10+)
• WOFF: nuovo standard per i caratteri web (FF 3.6+, Chrome 5+)
• SVG: IOS <4.2

Maggiori informazioni su The @ Font-Face Rule e utili trucchi per i font web

Tutti questi servizi supportano i principali formati di font. Con i caratteri ospitati autonomamente, se usi la sintassi corretta dovresti essere coperto. Ecco un aggiornamento del 2011 della sintassi a prova di proiettile di FontSpring :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

Prestazioni I: download

Per quanto ne so, l'utilizzo della sintassi sopra consente ai browser di acquisire il formato specifico che funziona per loro, quindi non ci sono download sprecati su formati di caratteri che non funzionano.

I servizi a pagamento come Fonts.com, Typekit o Typography.com utilizzano metodi per rilevare il formato corretto e quindi fornire il formato del carattere corretto, spesso come dati base64 in un file CSS.

Da quello che posso vedere, le differenze nei metodi che hai elencato sopra sono abbastanza trascurabili per gli utenti di Internet ad alta velocità (sembra una differenza <200 ms), ma potrebbe valere la pena considerare per i dispositivi su reti più lente, specialmente per le visite alle pagine non memorizzate nella cache.

Performance II: sottoinsiemi

Se sai che ci saranno solo determinati caratteri che desideri utilizzare, puoi creare il tuo font con un sottoinsieme di caratteri e ridurre così la dimensione del download.

• Fonts.com : controllo molto dettagliato
• FontSpring : può ricompilare come sottoinsieme tramite il generatore di caratteri web FontSquirrel
• FontSquirrel : può ricompilare come sottoinsieme tramite il generatore di caratteri web
• Google : controllo molto dettagliato
• Typekit : opzioni limitate di "tutti i caratteri" o "predefinito"
• Typography.com : controllo molto dettagliato

Prestazione III: consegna

• Fonts.com : CDN globale o il tuo server
• FontSpring : basato sul tuo server
• FontSquirrel : basato sul tuo server
• Google : super-CDN globale
• Typekit : CDN globale
• Typography.com : Global CDN (125.000 server)

Supporto linguistico

• Fonts.com : 40 lingue, incluse asiatiche e mediorientali
• FontSpring : occidentale, a seconda del carattere
• FontSquirrel : Western, a seconda del font
• Google : occidentale, a seconda del carattere
• Typekit : Western, a seconda del carattere
• Typography.com : Western, a seconda del carattere

Test e implementazione

• Fonts.com : molto semplice, con strumenti estesi e personalizzabili
• FontSpring : tecnico (fai da te)
• FontSquirrel : Tecnico (fai da te)
• Google : facile
• Typekit : facile
• Typography.com : test facile, un po 'più complicato da modificare una volta distribuito

Bene, come stai cercando

... cercando le migliori pratiche qui, le prestazioni sono importanti, ma lo sono anche la scalabilità e la facilità d'uso. Per non parlare del look and feel.

la risposta è (come sempre nel web design): dipende!

Una cosa certa è che non consiglierei di utilizzare l'approccio JS (mostrato nel secondo esempio).

Personalmente non mi piace fare cose di presentazione e stili CSS dipendenti da Javascript, anche se la stragrande maggioranza degli utenti lo ha abilitato. Si tratta di non confondere le cose.

E come puoi vedere nel tuo esempio dato, c'è una sorta di FOUC (flas di contenuto non stilato), perché la pagina è già renderizzata dal browser prima che il carattere sia disponibile. Non appena lo è, la pagina viene ridisegnata. E più grande è il sito, maggiore sarà l'impatto (sulle prestazioni)!

Quindi non userei mai alcuna soluzione JS per l'incorporamento dei caratteri.

Ora diamo uno sguardo ai metodi CSS puri.
Da un po 'di tempo ecco una discussione su "vs. @import". Personalmente preferisco evitare l'uso di @import e usarlo sempre e <link>solo. Ma questa è principalmente una questione di preferenze personali. L'unica cosa che non dovresti mai fare è mescolarli entrambi!

Local vs. CDN
Quando si decide se ospitare i file dei font localmente o utilizzare un CDN, imho dipende principalmente dal numero di font diversi e dai rispettivi font che si desidera incorporare.

Perché questo è importante o gioca un ruolo?
Dal punto di vista delle prestazioni, consiglierei di includere il font Base64 codificato nel tuo (uno) foglio di stile. Ma solo il formato .woff, poiché viene utilizzato da quasi tutti i browser moderni, il che significa per la maggior parte dei tuoi visitatori. Per tutti gli altri utenti convivono con la richiesta aggiuntiva.

Ma a causa del "sovraccarico" causato dalla codifica Base64 e dalla dimensione di un file di font (anche in formato .woff) questa tecnica dovrebbe essere utilizzata solo se non si hanno più di 3 o 4 font diversi. E assicurati sempre che il tuo server fornisca i file (CSS) gzip'ed.

Il grande vantaggio di farlo è che non hai una richiesta aggiuntiva per il file del font. E dopo il caricamento della prima pagina (indipendentemente dalla pagina del tuo sito) il file CSS viene memorizzato nella cache. Questo è anche un vantaggio se usi la cache dell'applicazione HTML5 (cosa che sicuramente farai).

Oltre al fatto che un autore non dovrebbe utilizzare più di un massimo di 3 o 4 caratteri diversi sul suo sito, diamo un'occhiata al metodo di utilizzo del CDN di Google.

Prima di tutto, tieni presente che puoi (e dovresti sempre) includere tutti i caratteri desiderati in un unico <link>, in questo modo:

<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez' rel='stylesheet' type='text/css'>

Ciò si tradurrà nella seguente risposta:

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

Come puoi vedere, ci sono 9 diversi file di font, il che significa un totale di 10 richieste (inclusa quella dell'elemento link), se l'utente non ha uno o più dei font richiesti installati localmente. E queste richieste vengono ripetute ad ogni singola richiesta di nuova pagina al tuo sito (anche se non vengono trasferiti più dati)! Anche la risposta alla richiesta del <link>non viene mai memorizzata nella cache.

Raccomandazione:
Dopotutto, consiglierei davvero di includere i tuoi file di font in formato .woff Base64 codificato nel tuo foglio di stile!

Vedi questo bell'articolo per un esempio e una descrizione di come farlo!

Uso il metodo CSS inline perché il sovraccarico della richiesta extra è maggiore dell'aumento delle dimensioni durante la codifica bease64. Questo è anche ulteriormente compensato dalla compressione gizip da parte del server dei file css.

Un'altra opzione è utilizzare il caricamento asincrono dei caratteri, ma molto spesso gli utenti vedranno i caratteri apparire dopo il caricamento.

Indipendentemente dal metodo, è possibile ridurre la dimensione del file del font includendo solo i set di caratteri che userete.

Personalmente utilizzo Google Fonts. Hanno una buona varietà di scelte e di recente hanno migliorato la compressione sui caratteri passando anche alla compressione Zopfli . Google si sta impegnando per rendere il Web più veloce, quindi immagino che anche da loro arriverà una maggiore ottimizzazione da parte sua.

Qualunque cosa tu scelga come consegna di font in outsourcing, otterrai sempre riduzioni di velocità dalle richieste per ottenere i font. La cosa migliore, vista da una prospettiva di velocità, sarebbe servire i caratteri da soli. Se non ti interessano quei millisecondi extra necessari per caricare da una consegna esternalizzata, dovresti farlo se pensi che la facilità di utilizzo valga i millisecondi.

Non conosco Typekit e gli altri, ma con Google Fonts puoi scegliere che vengano serviti sottoinsiemi specifici e gamma di caratteri per velocizzare ancora di più la consegna.

Scegliere un sottoinsieme:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet">

Scegliere una serie di caratteri:

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

Puoi utilizzare dns-prefetch per migliorare ulteriormente la velocità con la consegna dei caratteri.

Penso e spero che Google farà tutto il possibile per accelerare il più possibile la consegna dei caratteri. I millisecondi necessari per caricarli non danneggiano il mio sito Web, quindi li uso volentieri.

Per farla breve:

Se i millisecondi di consegna dei caratteri danneggiano il tuo sito, ad esempio facendolo caricare più del secondo consigliato, penso che dovresti ospitarli tu stesso.

L'opzione migliore è importare i caratteri usando ajax, proprio in questo modo:

<script>
    (function() {
        var font = document.createElement('link'); 
        font.type = 'text/css'; 
        font.rel = 'stylesheet';
        font.href = '/url/to/font.css';
        var s = document.getElementsByTagName('link')[0]; 
        s.parentNode.insertBefore(font, s);
      })();
</script>

Lo faccio sulla mia pagina web e aumento di 9 punti nel test di Google Insights.