call jQuery function after fonts are loaded.

Question

I have multiple fonts in web site It loads very slowly,I have some jquery functionality I need to load them when the fonts are loaded.

I have tried to call it in

Answer 1

In order to capture the event, you'll need to use a font loader. Sadly, there isn't a cross-browser way of loading the fonts, so I suggest you try the Google WebFont Loader:

var WebFontConfig = {
  monotype: {  // Fonts.com 
    projectId: 'YourProjectId'
  },
  active: function() {
    // do something
  }
};

(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

Answer 2

One problem with the Google font loader callbacks/events is that if you're using jQuery - you may not want to run your event handler until the DOM is loaded - but you don't want to risk running it before you're sure all fonts are loaded.

Here's my solution for that. Assumptions:

• You've are using the Google Font loader
• You want to run something only after all fonts, css and the DOM are loaded
• You're fine with having jQuery load before the font loader starts (because I'm using $.Callbacks())

This is what I do immediately after the jQuery <script> tag

 var activeCallback = $.Callbacks();

 WebFontConfig = {
     google: { families: ['Open+Sans:400italic,400,300,600:latin'] },
     active: function () { activeCallback.fire(); }
 };

 // ...

And then a standard jQuery ready function

 $(function() 
 {
    // start slide show when all fonts are loaded (need to calculate heights)
    activeCallback.add(function ()
    {
        startSlideshow();
    });

    // other DOM manipulation
 });

The callback will fire whenever the Google font loader is complete - but if the document is not yet completed the event will not be fired until it has (that's the way jQuery Callbacks work).

Answer 3

If you want to control the loading process of @font-faces use WebFont Loader, developed by Google and Typekit.

https://developers.google.com/webfonts/docs/webfont_loader