Jquery Masonry not working with Google Fonts

Question

I have an issue with overlapping in Masonry that I've discovered is caused by Google Fonts loading after the Masonry script. I've added the following code to fix this, but now Masonry doesn't work. Actually, it looks like Masonry is working for a split second and then suddenly stops working.

$(document).ready(function () {
  WebFont.load({
    google: {
      families: ['Chivo']
    }
  });
  WebFontConfig = {
    active: function() {
      $('#archive').masonry({
          itemSelector : '.item',
          columnWidth: 350,
          gutterWidth: 20
      });
    }
  };
});

Answer 1

Looks like the Google WebFontLoader events only work if the fonts are loaded asynchronously. I should have read the documentation more closely. Here's how my functioning code ended up looking...

$(document).ready(function () {

  WebFontConfig = {
    google: {
      families: ['Chivo']
    },
    active: function() {
      $('#archive').imagesLoaded(function(){
        $('#archive').masonry({
            itemSelector : '.item',
            columnWidth: 333,
            gutterWidth: 10
        });
      });
    }
  };

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