I have a plugin called slabtext that I want to run ONLY after my fonts are FULLY loaded. I tried the following but It doesn't work (probably an error in the script just before the closing body). Is there a simple way to run the Slabtext script only after the fonts are fully loaded, I already tried $(document).ready(function(), but it doesn't help
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Roboto:300', 'Roboto+Slab:400']
}
});
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/slabText/2.3/jquery.slabtext.js"></script>
</head>
<body>
<h1 id="mainhead">
<span class="slabtext">For one night only</span>
<span class="slabtext">Jackie Mittoo</span>
<span class="slabtext">with special Studio One guests</span>
<span class="slabtext">Dillinger & Lone Ranger</span>
</h1>
...
<script>
WebFont.load({
active: function() {
$('#mainhead').slabText();
}
})
</script>
</body>
The webFontLoader also adds the class .wf-active to the html element when all the fonts are finished loading, If thats any help.
Calling "google" and "active" in the same WebFont-load() event works for me: