Web Font Loader - FontAwesome always reports inactive in IE

Question

My site has some customers that work for organizations who are blocking font downloads in IE, so I need to create fallback options for FontAwesome. I am trying to use web font loader to detect if FontAwesome loaded correctly, but web font loader is always reporting that FontAwesome failed to load even though I can see that the FontAwesome icons loaded. I have tested IE 9/10/11.

You can view 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, in IE the font loads but then web font loader fires the failed to load callback and attaches the inactive class to the HTML tag. I have special CSS to load some fallback characters to replace the FontAwesome icons which are then loaded.

From the web font loader GitHub page, I don't see any incompatibilities listed with IE, so I assume 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");
  }
});

Edit - 2015/05/27 9:58 am

I changed the timeout from the default 3 seconds to 10 seconds, and the load is definitely taking all 10s and then timing out. I am not sure what that means. Why is it only timing out on IE?