1 Reply Latest reply on May 13, 2017 4:52 AM by e.d.

    Asynchronous font loading

    e.d. Level 3

      Hi everyone,

       

      when trying to use asychronous font loading via google fontloader like so...

       

      WebFontConfig = {

           google: {

                families: [ 'Open Sans:400' ]

           },

           /* Called when all the specified web-font provider modules (google, typekit, and/or custom) have reported that they have started loading fonts. */

           loading: function() {

                // do something

                alert ("ready");          // TRIGGERED IN CHROME AND PREMIERE

           },

           /* Called when each requested web font has started loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */

           fontloading: function(fontFamily, fontDescription) {

                // do something

                alert ("loading...")      // TRIGGERED IN CHROME AND PREMIERE

           },

           /* Called when each requested web font has finished loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */

           fontactive: function(fontFamily, fontDescription) {

                // do something

                alert ("loaded!")         // TRIGGERED IN CHROME, BUT NOT IN PREMIERE

           },

           /* Called if a requested web font failed to load. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */

           fontinactive: function(fontFamily, fontDescription) {

                // do something

                alert ("bummer.");       // TRIGGERED IN PREMIERE

           },

           /* Called when all of the web fonts have either finished loading or failed to load, as long as at least one loaded successfully. */

           active: function() {

                // do something

                alert ("all good!"); // TRIGGERED IN CHROME, BUT NOT IN PREMIERE

           },

           /* Called if the browser does not support web fonts or if none of the fonts could be loaded. */

           inactive: function() {

                // do something

                alert ("broken!");     // TRIGGERED IN PREMIERE

           }

      };

       

      /* async! */

      (function() {

           var wf = document.createElement('script');

           wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';

           wf.type = 'text/javascript';

           wf.async = 'true';

           var s = document.getElementsByTagName('script')[0];

           s.parentNode.insertBefore(wf, s);

      })();

       

      this will work in Chrome (fontactive is being called), but not properly in Premiere (tested with CC2015.4). See above.

      The font will load (!!), but the wrong callback will be triggered (fontinactive).

       

      Why does this happen (exactly), and how to fix it?

        • 1. Re: Asynchronous font loading
          e.d. Level 3

          The pragmatic solution is not not rely on online font loading but use local fonts instead via @font-face .

          Just keep in mind though that the license permits you to distribute the font with your panel.

           

          Waiting for this answer to be superseded by something answering the original question...