How To Fix jQuery Masonry and Google Fonts

This is a quick post just to let you know about the fix for jQuery Masonry and google fonts (this probably applies to all custom fonts).

The problem with jQuery Masonry is that it can load and position all the items based on the height of the grid items. The grid items height changes depending on the font used. So if jQuery Masonry is laid out on the page and then the fonts load, you will have an issue with the positioning.

To resolve this issue you have to make sure that after the fonts have loaded you call the masonry layout function. Here is a snippet below to show you how to do it using google fonts font loader.

WebFont.load({
    google: {
        families: ["Open Sans", "Ranchers"]
    },
    active: function () {
        var e = jQuery("#masonry-grid");
        e.masonry("layout");
    }
});

I covered this on my post quick and easy jQuery masonry tutorial but for those of you who are comfortable with jQuery Masonry and have this specific issue I thought I would quickly cover it in more detail. Hope this helps someone.