I'm having trouble with what should be a fairly obvious question.
The Webfont Loader documentation states to place it as "the first element in the <head> of your HTML document." It also includes active/inactive callback options, which are called either when the fonts are loaded or when they fail to load / time out.
The problem is, if I place my callback functions in a script block immediately after the , the callback functions are undefined at that time.
My code is as follows:
<head>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Playball::latin' ] },
active: doActive(),
inactive: doInactive()
};
(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>
// ... other code ...
<script>
function doActive() {
// ...
}
function doInactive() {
// ...
}
</script>
</head>
That's just the default Google code, plus the two callbacks.
The only obvious option I see is to include the webfont loader after I define the other functions, but that's not elegant. I know there is a better solution, but my Google-fu isn't finding it.
Your fault was to execute the callbacks directly.
WebFontConfig = {
google: { families: [ 'Playball::latin' ] },
active: doActive(), // () executes directly
inactive: doInactive()
};
Instead of this your should try that:
WebFontConfig = {
google: { families: [ 'Playball::latin' ] },
active: doActive, // Only the function. The library will execute the function
inactive: doInactive
};
If the library execute your callbacks, the function should available