My front page layout is arranged using the "Masonry" jQuery plugin, with each div containing an upper image div and a lower text div. The plugin is initialized like this:
function use_masonry() {
var container = document.querySelector('#container');
var msnry = new Masonry(container, {
transitionDuration: '0.2s',
isResizeBound: false,
gutter: 10,
gutterY: 0,
itemSelector: '.divs_to_be_arranged'
});
}
EDIT: This function is called as follows:
//called when page loaded/reloaded
$("img").load(function() {
use_masonry();
});
$(window).resize(function() {
use_masonry();
});
Custom font CSS implementation:
@font-face {
font-family: 'leaguegothic-regular';
src: url('fonts/leaguegothic-regular-webfont.eot'); /* IE9 Compat */
src: url('fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/leaguegothic-regular-webfont.woff') format('woff'), /* Modern Browsers */
url('fonts/leaguegothic-regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/leaguegothic-regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Sometimes, on initial load (after cache clear), the vertical gutters in the grid generated by Masonry are inconsistent. However, this issue is resolved upon window resize or reload. It appears that the problem is related to the custom font usage.
Any suggestions on what might be causing this and how to fix it?