Web Font Loader - FontAwesome always reports activity in IE

I have a few clients on my site that work for organizations that block font loading in IE, so I need to create fallback options for FontAwesome. I am trying to use the web font loader to determine if FontAwesome is loading correctly, but the web font loader always reports that FontAwesome failed to load, although I can see that the FontAwesome icons are loading. I tested IE 9/10/11.

You can see this in action at https://vnext.radresponder.net . You will see that in Firefox and Chrome, FontAwesome is correctly loaded and marked as active; however, IE loads the font, but then the web font loader fires an inactive callback and attaches the inactive class to the HTML tag. I have custom CSS to load some fallback symbols to replace FontAwesome icons, which are then loaded.

On the GitHub page of the web font loader, I don't see any incompatibilities listed in IE, so I'm guessing this should work.

Here is my WebFont.load statement.

WebFont.load({
  custom: {
    families: ['FontAwesome'],
    urls: ['/local/address/for/fontawesome.css'],
    testStrings: {
      'FontAwesome': '\uf00c\uf000'
    }
  },
  loading: function () {
    console.log("loading");
  },
  fontloading: function (fontFamily, fontDescription) {
    console.log('fontloading: ' + fontFamily);
  },
  fontactive: function (fontFamily, fontDescription) {
    console.log('fontActive: ' + fontFamily);
  },
  fontinactive: function (fontFamily, fontDescription) {
    console.log('fontInActive: ' + fontFamily);
  },
  active: function () {
    console.log("active: loaded all web fonts");
  },
  inactive: function () {
    console.log("inactive: did not load all web fonts");
  }
});
      

Run codeHide result


Edit - 2015/05/27 9:58 AM

I changed the timeout from the default of 3 seconds to 10 seconds and the boot definitely takes the entire 10 seconds and then shuts down. I'm not sure what that means. Why is it only time on IE?

+3


source to share





All Articles