CODEWITHSUNDEEP
cssfont-facewebfontsgoogle-webfonts
davecave
davecave

Reputation: 4818

How to load a large amount of Google Web Fonts?

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?

Upvotes: 4

Views: 1407

Answers (1)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94299

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>

Demo: http://jsfiddle.net/DerekL/bkV7E/

Upvotes: 2

Related Questions