Demo: http://pulse-dev.com/files/stackoverflow/fontfacedelay/index4.htm
This jQuery plugin will allow you to check whether custom @font-face fonts have loaded or not. This allows you to alter your styles while fonts are loading in, or upon failure.
This works by checking the change in width of a string. We are using Comic-Sans as the font to compare against as it is the most different. Using a very large font-size, we are able to determine even the slightest change. When the width of the string changes, we know that the custom font-face file has been loaded and applied.
USAGE
CSS
.checkme {
font-family: "Lobster"; //don't specify fallback font
font-size: 120px;
}
.pickme {
font-family: "FontAwesome";
font-size: 120px;
}
.fontLoading {
visibility: hidden !important;
//!important may or may not be necessary, depending on your CSS structure
}
.fontFail {
visibility: visible !important;
}
.anotherClass {
font-family: verdana !important;
font-size: 20px !important;
color: green !important;
}
<span class="checkme">Crafting</span>
<span class="checkme">Serious</span>
<span class="checkme">Websites</span>
<i class="icon-search pickme"></i>
<i class="icon-inbox pickme"></i>
<i class="icon-barcode pickme"></i>
JavaScript
$(document).ready(function() {
$('.pickMe').fontChecker({
fontAwesome: true, //set to true if using Font Awesome (default is false)
onLoad: 'fontLoading', //call this class(es) when the font is loading (!important tag may be needed)
onFail: 'fontFail' //call this class(es) when the font has failed to load (!important tag may be needed)
});
$('.checkme').fontChecker({ //non Font Awesome font
onLoad: 'fontLoading',
onFail: 'fontFail anotherClass'
});
});