I've been tinkering with the Google Web Font API for the new
site design and thought I'd share my thoughts and how I've settled
on its use in the end.
One of the common things that people don't like is the flash of
unstyled text you get with the standard usage of Google Web Font in
some browsers so the first thing I did was to change this so it
hides by default and fades in when the fonts are loaded. This had a
number of steps, first - any tag with a Google Web Font has the
class "hide" appended to it - for example:
<div class="myclass hide">My content in
here</div>
Then - so that users who aren't using Javascript can always see
the text - the following is added to the <head> tag:
<noscript>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu|Just+Another+Hand|Neuton">
<link rel="stylesheet" href="/css/noscript.css" media="screen">
</noscript>
The first line loads the google
fonts using the CSS technique rather than using the Javascript, the
second contains a simple css file which overrides the display: hide
from the main css file.
Once that's done, we get onto the
real meat of the matter - loading the fonts with Javascript and
fading in the text with jQuery.
The following Javascript does the
loading (taken from here with some
changes):
var fontsLoaded = 0;
WebFontConfig = {
google: { families: [ 'Ubuntu', 'Just
Another Hand',
'Neuton' ] },
loading: function() {
window.setTimeout(function() {
if (fontsLoaded == 0)
{
$('<div
class=\"loading-pane\"><img src=\"\\images\\loading.gif\"
/><br/>Web fonts are loading - please wait.<br/>I
don\'t care <a href=\"javascript:showItems(2);\">show the
text now!</a></div>').insertAfter('.top-menu');
}
}, 1000);
},
active: function() {
fontsLoaded = 1;
showItems(1);
},
inactive: function() {
fontsLoaded = 2;
showItems(0);
}
};
(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);
})();
The
main changes to note are the addition of the fontsLoaded variable
(to signify whether loading was successful or not), the setTimeout
function (which adds a div containing a link to manually display
fonts if they're not loaded within 1 second) and the showItems
function call. The showItems function is as
follows:
function showItems(loaded)
{
var loadMessage = "";
if (loaded == 1)
{
loadMessage = 'Web
fonts loaded successfully.';
}
else
{
if (loaded == 0)
{
loadMessage = 'There
was a problem loading webfonts.';
}
else
{
loadMessage = 'You
clicked the link!';
}
}
$('.loading-pane').html(loadMessage);
if (!$.browser.msie)
{
$('.hide').fadeIn('500');
$('.loading-pane').delay('1000').fadeOut('1000');
}
else
{
$('.hide').show();
$('.loading-pane').delay('1000').hide();
}
$('<div
class=\"select-bar\"> </div>').insertAfter('.top-menu');
}
This specifies what the message in the
loading pane should say (if it exists), then if we're in IE (which
has trouble with Google Web Fonts over transparencies) we show the
hidden classes and after a slight delay hide the loading pane. If
we're in another browser, it fades in the hidden text and fades out
the loading pane, giving a lovely but subtle effect rather than a
sudden appearance.
Finally - I added the following code to the
document ready event:
if
(fontsLoaded != 0)
{
showItems(1);
}
This is in case
the fonts load before the divs and spans that are
hidden.