Load Google Font with <Link> Asynchronously or Deferred Without Font Face Observer

Non-JS solutions to asynchronously load Google Fonts

I think this comment by soren121 on a related question pretty much sums it up:

The "lazyload" attribute comes from an abandoned W3C proposal, and it was only implemented by Internet Explorer and Edge. I would not recommend using it on a public website. To asynchronously load Google Fonts in all browsers, you should use Their JavaScript Web Font Loader.

And I too can say, there is no way to load fonts asynchronously without using JavaScript.

Load Google web fonts script link asynchronously

Try This.

<script>
   WebFontConfig = {
        google: { families: ['Oswald:400,300', 'Material+Icons'] }
   };

   (function(d) {
        var wf = d.createElement('script'), s = d.scripts[0];
        wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
        wf.async = true;
        s.parentNode.insertBefore(wf, s);
   })(document);
</script>

Different rendering of Google Fonts if is added with @font-face or standard stylesheet link?

It is possible. Render can be different depending on the font format.
Using this:

<link href='https://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet' type='text/css'>

Gives (more or less, it changes depending on the browser) this stylesheet:

@font-face {
  font-family: 'ABeeZee';
  font-style: normal;
  font-weight: 400;
  src: local('ABeeZee'), local('ABeeZee-Regular'), url(https://fonts.gstatic.com/s/abeezee/v9/TV7JXr7j4tW7mgYreANhGQ.woff2) format('woff2');
}

On the other hand the stylesheet from localfont is:

@font-face {
  font-family: 'ABeeZee';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/ABeeZee-regular/ABeeZee-regular.eot');
  src: url('/fonts/ABeeZee-regular/ABeeZee-regular.eot?#iefix') format('embedded-opentype'),
       local('ABeeZee'),
       local('ABeeZee-regular'),
       url('/fonts/ABeeZee-regular/ABeeZee-regular.woff2') format('woff2'),
       url('/fonts/ABeeZee-regular/ABeeZee-regular.woff') format('woff'),
       url('/fonts/ABeeZee-regular/ABeeZee-regular.ttf') format('truetype'),
       url('/fonts/ABeeZee-regular/ABeeZee-regular.svg#ABeeZee') format('svg');
}

This second css have the font in many formats and the browser will use the first one it can understand, wich could be not the same one used in the other css.

On the other hand the font file itself can be different, ABeeZee downloaded from localfont (right now) sizes 13KB, but from Google it is 17KB. Since they are not the same file you can expect different results.

Avoid delayed load of font-face

You're bringing up two separate issues.

A delay in downloading the actual font files is essentially unavoidable, though you can help it by not including anything you don't actually need, so as to minimize the file size overall. Depending upon what service/method you're using, this might entail reducing what character sets(/languages) you include, as well as weights and styles.

As to the flash of unstyled text, that's semi-unavoidable, partially due to the downloading time issue above. But once you've reduced that as much as you can, you should implement a font loader to take better control of this part. Here's TypeKit's (open-sourced) implementation, and a brief explanatory blog post. The example at bottom specifically addresses FOUT; you can pretty much just drop it into your own code.

Here's some information from FontDeck on using Google's loader with their service, which will also lead to using same for Google's WebFonts service.

Any other service, you'll have to start doing your own research, but those are the general concepts. With those tools, you can use a bit of scripting and CSS rules to hide the affected text until the fonts are ready for presentation, among some other uses. It's not completely idea, but at least prevents the FOUT. Once past that initial time, the browser's cache should take over and make it largely moot.

---

Related Topics