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 ``` jQuery(window).load(function () { //my_function() }); ``` not working what to do???

Accepted Answer

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

call jQuery function after fonts are loaded.

Solution

Problem

Related problems