How to check the loading of an external font

Question

I have a very strange problem, and I'm not even sure that its the right angle, but here is the setting:

link to google font in head;

onload: function x()to display the font in the canvas;

onclick: x();

since it onloaddisplays text in a standard font and the execution of onclickthe same function is fine, I think the font is not fully loaded on the first execution. so I was wondering if there is a way to check the progress of loading an external font.

Answer 1

Have you looked at the Google Fonts API, in particular the "Action in Events" section ?

Answer 2

WebFontConfig = {
  google: {
    families: [ 'Tangerine', 'Cantarell' ]
  },
  typekit: {
    id: 'myKitId'
  },
  loading: function() {
    // do something
  },
  fontloading: function(fontFamily, fontDescription) {
    // do something
  },
  fontactive: function(fontFamily, fontDescription) {
    // do something
  },
  fontinactive: function(fontFamily, fontDescription) {
    // do something
  },
  active: function() {
    // do something
  },
  inactive: function() {
    // do something
  }
};

(function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://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);
      })();