No doubt: the jquery plugin Masonry can be a nice website feature – if it works as intended. It can be a pain in the neck if it doesn’t. The most common problem with Masonry is probably slow loading images. This problem can be caused by either large, heavy images that need some time to load – or a slow internet connection on the client side. This problem is well known, well documented – and there is a fix for this: you just need to implement one additional script imagesLoaded that checks if the images are already loaded, or not.

The other not so common, not so well documented problem can arise from the use of Webfonts. The problem is not as obvious – but anyways annoying. Sometimes a single Masonry item is off the grid – depending on your layout you may not even see you have a problem in the first place. The offset may also only occur occasionally which makes it even more difficult to track.

What is causing the Masonry item offset?

All that Masonry does is basically measure the size of each item (or element or box) in the grid and then calculate its position according to the settings and preferences you defined. In most cases this works pretty smooth. But in case there are slow loading Webfonts used inside the grid items, Masonry may first calculate the positions wrongly. Or actually it is first calculating the positions correctly, but once the Webfonts are loaded, some text like a headline might be using less space. This may lead to line breaks disappearing after Masonry finished calculated all the positions – hence the offset.

So as I said before – the problem can be difficult to track. You may actually never see the problem, if all the wefonts used are already present in your browser’s cache. And even then it can happen that your texts are behaving nicely because there are no line breaks disappearing. But then someday you change one of the text or add a new one and all of a sudden the grid looks wonky.

The ‘bug’ is probably most obvious when you’re working with a couple of same height testboxes – and only one has a text that adds a single disappearing line break. A single textbox may then be positioned a few pixels lower than the others. Sometimes also the order of the items can get mixed. Elements that should align to the left are suddenly floating to the right side of the grid  – an invisible element seems to be in the way. Sheer chaos breaks loose.

Anyways. Just like with slow loading images there is a fix / a script for slow loading Webfonts: webfontloader. The script was released by Google in cooperation with typekit and you are free to use it. You basically just have to load the script either through Google’s distribution platform, or install it locally on your webserver. Once the script is in position you will have to wrap some lines of Javascript around your Masonry code. This makes sure that Masonry is only fired when all the webfonts defined are present.

First make sure webfontloader / webfont.js is loaded:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'></script>

Then wrap your masonry code with the webfont load check:

// check if all webfonts have loaded
WebFont.load({
    custom: {
      families: ['RobotoCondensedRegular','RobotoCondensedItalic', 'RobotoCondensedBold' ]
    },
active: function() {

// check if all images have loaded
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry
  $grid.masonry({
    // use outer width of grid-sizer for columnWidth
    columnWidth: '.grid-sizer',
    // do not use .grid-sizer in layout
    itemSelector: '.grid-item',
    originLeft: true,
    percentPosition: true
  });
});

}

});

Check the project page over at github for further details:
https://github.com/typekit/webfontloader