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
      });
    }
  };
});

Renfred

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);
  })();
});

Renfred

I was struggling with an issue of overlapping images with Masonry despite using imagesLoaded, but then realized the height of the Google fonts was throwing things off. This is exactly the solution I needed. (Of course now fonts won't load if JS is turned off, but I can live with that.) – Enameling