Search code examples
fontswebfontsgoogle-webfonts

Loading fonts from Google web font directory


Google explain a number of techniques for using their web fonts in this article

They present two methods:

  • use webfont.js
  • use an API key and google.load

I already use an API key to load jquery and it seemed like the best way to go about it when I read the following line:

"if you are already using the Google's AJAX APIs, then use the [google.load technique]"_

BUT they go on to say that:

"the first method [webfont.js technique] is quicker"

Q1

They say that the webfont.js method is quicker but advise me to use the slower method on the grounds that I'm already using it to load other files from their network. Should I ignore their advice as a simple mistake on their part and use the faster method?

Q2

Is there any benefit to using either of these techniques over the following when I'm not interested in writing javascript callbacks?:

<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>

Solution

  • The advantage to the Google font loader is that it loads the fonts asynchronously in parallel with the rest of the page. Without an asynchronous approach, it is possible to block other assets while awaiting the loading of the fonts.