How to call jquery events with the google webfontloader

Question

I've read through the docs on github here: https://github.com/typekit/webfontloader#custom

And i get how to use the css classes being added to the html tag. But for some reason i don't understand how to call a function when the fonts are in the active mode.

i have the following code in my head tag, and the css classes are being added:

 <script>          
      WebFontConfig = {
        custom: {
            families: ['apex_new'],
            urls: ['http://salaam.minnie.mico.dk/wp-content/themes/salaam/style.css']
            active: function () { alert('test'); }
        }
    };
    (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })();

How would I get an alertbox or console.log to pop when in active mode with jquery ??

Thanks!!

Answer 1

There are callbacks provided to WebFontConfig (or in config when calling WebFont.load()).

WebFontConfig = {
    custom: {
        families: ['apex_new'],
        urls: ['http://salaam.minnie.mico.dk/wp-content/themes/salaam/style.css']
    }
    active: function () { console.log('active') }
};

OR

WebFont.load({
    custom: {
        families: ['apex_new'],
        urls: ['http://salaam.minnie.mico.dk/wp-content/themes/salaam/style.css']
    }
    active: function () { console.log('active') }
});

So you just putted it to wrong place.