Last Typekit asynkront

25. februar 2011 av Pål

(Oppdatert, ikke så enkelt allikevel). I skrivende stund sitter vi og jobber med en ny versjon av felt.no, og i løpet av kvelden har vi opplevd at sidene ikke lastes fordi et JavaScript fra Typekit ikke ville laste. Jeg spurte Typekit om de hadde problemer, og det hadde de. Her er oppskriften på hvordan du kan laste scriptet asynkront, og unngå at nettstedet ditt ikke vises fordi Typekit har problemer med infrastrukturen.

Hvis du har en konto hos Typekit, så har du fått beskjed om å inkludere JavaScriptet deres på følgende måte (der abcdef er din unike identifikator, bytt den ut i eksempelet mitt).

<script src="http://use.typekit.com/abcdef.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

Prøv dette istedenfor:

<script>
(function() {
  var tk = document.createElement('script');
  tk.type = 'text/javascript';
  tk.async = true;
  tk.src = ('http://use.typekit.com/abcdef.js');
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(tk, s);
  tk.onload = function () {
    try{Typekit.load();}catch(e){}
  }
})(); 
</script>

Hvis Typekit-serverne ikke svarer, så vises sidene dine uten fontene derfra. Men det er bedre enn at de ikke vises i det hele tatt. Eller hva?

Oppdatering: Det var for godt til å være sant, eller hva? Så enkelt kunnde det jo ikke være. Det viser seg at Internet Explorer ikke skjønner det med onload, så da er vi tilbake der vi var. Jeg burde vel egentlig skjønt at Jeffrey Veen og Typekit hadde laget en asynkron måte å laste scriptet sitt på, dersom det var mulig å få til på en måte som fungerte for alle.

Fra bloggen

Felt