Using jQuery Masonry overlapping issue and Typekit

Question

I'm using masonry and typekit. Hence, I would want the layout to not have overlapping due to image loading and at the same time render the typekit fonts without having the default fonts being shown in a flash when we first load the page.

Hence, I need javascript codes to deal with both issues: overlapping images from masonry and loading typekit fonts correctly.

I have the following codes in my javascript file that loads the masonry perfectly, but i'm unable to correctly load the typekit fonts. When the website first loads, it shows the default Times New Roman font, then it shows the typekit fonts after a flash.

How can I amend my javascript codes?

  //trigger masonry and typekit
  var $container = $('#wrapper');
  function triggerMasonry() {
    if ( !$container ) {
      return
    }
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector : '.box',
        columnWidth : 240
      });
    });
  }

  $(function(){
    $container = $('#wrapper');
    triggerMasonry();
  });

  Typekit.load({
    active: triggerMasonry,
    inactive: triggerMasonry
  });

Ross Edman Ross Edman · Accepted Answer · 2012-09-27T05:40:04

Thanks for your code example it really helped me out and I was able to solve this just by simply removing the originaly Typekit load function that Typekit supplies:

<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

After removing this my masonry worked flawless.

Using jQuery Masonry overlapping issue and Typekit

1 Answers