slow / unresponsive / stuck typekit script

问题:

ive installed typekit on my site, the usual two lines of js just after the opening head tag but its extremely slow / unresponsive to load in the fonts, this is completly remedied by refreshing the page, after that the typekit font load in perfectly and really quickly. But from a users point of view they will never know to do that, so they will be served the default fonts.

I have the typekit js as the very first thing under the opening head tag before the metatags and before loading in jquery, jquery-ui and other scripts.

Has any one else had trouble with this ?

回答1:

what seemed to work for me was to load the script in an asynchronous pattern - as specified on the typekit blog, ive copied it in bellow

Standard asynchronous pattern

This first pattern is the most basic. It’s based on patterns written about by web performance experts like Steve Souders and used in other JavaScript embed codes like Google Analytics.

<script type="text/javascript">
  TypekitConfig = {
    kitId: 'abc1def'
  };
  (function() {
    var tk = document.createElement('script');
    tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
    tk.type = 'text/javascript';
    tk.async = 'true';
    tk.onload = tk.onreadystatechange = function() {
      var rs = this.readyState;
      if (rs && rs != 'complete' && rs != 'loaded') return;
      try { Typekit.load(TypekitConfig); } catch (e) {}
    };
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(tk, s);
  })();
</script>

This pattern uses a single inline tag to dynamically add a new script element to the page, which loads the kit without blocking further rendering. An event listener is attached that calls Typekit.load() once the script has finished loading. How to use it:

Place this snippet at the top of the so the download starts as soon as possible. Edit the highlighted TypekitConfig object and replace the default with your own Kit ID. You can add JavaScript font event callbacks to the TypekitConfig object.

Advantages:

Loads the kit asynchronously (doesn’t block further page rendering while it loads).

Disadvantages:

Adds more bytes to your html page than the standard Typekit embed code. Causes an initial FOUT in all browsers that can’t be controlled or hidden with font events.