Search code examples
javascriptvariablescallbackwebfontsgoogle-webfonts

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 waits for 5 seconds and then the fontinactive callback fires.) I suspect the problem is in how I'm declaring the two variables to the function.

Edit: The problem may have to do with the font, not how I'm declaring the variable. The font-loader sucessfully detects when the "STIXGeneral" font family loads, which contains regular letter characters.

Documentation of the fontactive callback is here. I haven't been able to find any examples of using the fontactive callback.

I've posted a copy of my code below.


From Javascript:

WebFont.load({
    custom: {
        families: [ 'STIXSizeOneSym' ],
        urls: ['resources/stix-fonts/STIX-fonts.css']
    },
    fontactive: function(stixsizeonesym, n4) { alert("1") },
    fontinactive: function(stixsizeonesym, n4) { alert("2") },
    inactive: function() { alert("10") }
});


From STIX-fonts.css:

@font-face {
    font-family: 'STIXSizeOneSym';
    src: url('STIXSizOneSymBol-webfont.eot');
    src: url('STIXSizOneSymBol-webfont.eot?#iefix') format('embedded-opentype'),
          url('STIXSizOneSymBol.otf') format('opentype'),
          url('STIXSizOneSymBol-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    }

Solution

  • 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.