Google Web Fonts loading after layout has rendered

Question

I have a script on my page that rearranges a bunch of boxes into a pinterest like mosaic, using the excellent jQuery Masonry plugin. I call the box layout rendering method like this from the bottom of the page (just before ):

<script type="text/javascript">
  $(function() {
    wall.drawBoxes();
  });
</script>

I also use google web fonts like this, just after the tag:

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

The problem is the boxes are rendered before the font has been loaded. And when the font has loaded, the boxes increase in size, making the rendered mosaic layout look like crap.

What can I do to prevent that?

Answer 1

I added the fontactive callback which fires then a font has finished loading.

$(document).ready(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] },
    fontactive: function(fontFamily, fontDescription) { wall.drawBoxes() }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 

});