Including Google Web Fonts link or import?

问题:

What is the preferred way of including Google Web Fonts to a page?

1. via the link tag?

   <link href='http://fonts.googleapis.com/css?family=Judson:400,400italic,700' rel='stylesheet' type='text/css'>

2. via import in a stylesheet?

   @import url(http://fonts.googleapis.com/css?family=Kameron:400,700);

3. or use the web font loader

   https://developers.google.com/webfonts/docs/webfont_loader

回答1:

For 90%+ of the cases you likely want the <link> tag. As a rule of thumb, you want to avoid @import rules because they defer the loading of the included resource until the file is fetched.. and if you have a build process which "flattens" the @import's, then you create another problem with web fonts: dynamic providers like Google WebFonts serve platform-specific versions of the fonts, so if you simply inline the content, then you'll end up with broken fonts on some platforms.

Now, why would you use the web font loader? If you need complete control over how the fonts are loaded. Most browsers will defer painting the content to the screen until all of the CSS is downloaded and applied - this avoids the "flash of unstyled content" problem. The downside is.. you may have an extra pause and delay until the content is visible. With the JS loader, you can define how and when the fonts become visible.. for example, you can even fade them in after the original content is painted on the screen.

Once again, the 90% case is the <link> tag: use a good CDN and the fonts will come down quick and even more likely, be served out of the cache.

For more info, and an in-depth look at Google Web Fonts, check out this GDL video

回答2:

You can save some request time

...if you take some extra coding time.

It's really no big deal, just open Google's simplified one-line link:

   http://fonts.googleapis.com/css?family=Kameron:400,700

and see what it gives you:

/* latin */
@font-face {
  font-family: 'Kameron';
  font-style: normal;
  font-weight: 400;
  src: local('Kameron'), url(https://fonts.gstatic.com/s/kameron/v8/vm82dR7vXErQxuzngLk6Lg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Kameron';
  font-style: normal;
  font-weight: 700;
  src: local('Kameron Bold'), local('Kameron-Bold'), url(https://fonts.gstatic.com/s/kameron/v8/vm8zdR7vXErQxuzniAIfO-rpfQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Yes, that's only a couple of other requests. It's faster to start with these directly - even faster if you download the font files to your own server and add a localhost URL before the Google ones. I know I know, we like CDNs and paralell requests, they are meant to be faster - but just try and see for yourself.

Now for the original question: don't @import, don't <link>, just put this code right into your existing global CSS, it's the best for your server. It needs no plus request, it's not a separate move - only a very slight increase in the size of the file which will add practically nothing to a request's processing time. Will it be beautiful to look at? No... But your site will hopefully get a lot more requests than revisions :) So help the server, not yourself.

Overall, I think it's worth the extra mile.

The one-line version is not designed to be efficient but simple - for bloggers who want the easiest possible way. You know better.