Google/typekit Webfont-loader Does Not Detect Non-ascii Fonts

I'm using the Google webfont loader, but I can't get the fontactive callback to work. The font is rendering on the page, but for some reason the callback isn't firing. (Instead it

Solution 1:

I'm one of the developers of the webfontloader. We are currently using an ASCII string to detect whether or not a font has loaded. So if your font does not include the characters "BESbswy" the webfontloader won't be able to detect it. We're working on adding support for configurable test strings (so you can include some characters from the Unicode range your font supports.) I've opened an issue for this on the webfontloader repository (https://github.com/typekit/webfontloader/issues/104).

As a temporary solution you can compile your own version of the webfontloader that adds characters from your font to the test string. Let me know if you need help with that.

Solution 2:

I try to use the loader on a Chinese Font "cwTeXHei" downloaded from Google Early Access.

I spent an afternoon and finally make the fontactive works using the follow codes:

WebFontConfig = {
  custom: {
    families: ['ChineseCustomFont'],
    testStrings: {
      'ChineseCustomFont': '\uE003\uE005'
    },
  },
  timeout: 8000
};
(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1.5.3/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

Points to noted:

1. Use webfont loader >1.5.0 for support of "testStrings"
2. Use '\uE003\uE005' as "testStrings", I tried '\u9ED1' but not works and I haven't figure out why
3. change timeout since chinese font files are large, default is 5000

Hope it helps someone too!

Solution 3:

Have the same prob and did not find any solution yet. It affects only a few fonts, i.e. Bree, or Playfair. My suspicion is that it has something to do with webkit progressively downloading fonts. It seems "fontinactive" is fired immediately. I ended up with some complicated Javascript stuff, checking the dimensions of a hidden container in an interval :/