Is there a better way to load a large amount of Google Web Fonts into a single page?
Maybe delay loading certain ones while the page loads? Or maybe only load certain fonts after the user scrolls down to a specific point?
I can't help but think there is a better way of loading several fonts. After putting 2 or 3 in the Google "Font Collection" the page load is apparently pretty high.
I am not trying to be tacky by designing with a bunch of fonts, but I am trying to think of a better way to display a lot of fonts — kind of like a specimen book.
I guesss the best example would be the infinite scroll on Myfonts. I know that those fonts aren't displayed using web fonts, but I think there should be a similar way of loading web fonts. I mean, how does google load all of those fonts on the homepage?
I don't know if this is going to work out for you, but Google Web Fonts does provide a JavaScript method, which you can set when to use the font. (Maybe load the fonts after the page done loading?)
Try the live demo.
Example (Using font Glass Antiqua):
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Glass+Antiqua::latin' ] }
};
var YOURFUNCTION = 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);
};
//Maybe 10 seconds later?
setTimeout(YOURFUNCTION, 10000);
//Document Ready?
$("body").ready(YOURFUNCTION);
</script>