Discussion about Google Fonts and how to best load them.

Google Fonts

Google Fonts Developer Guide provides documentation.

Google Web Fonts Helper

From Google Fonts choose your fonts.

When finished, select family.

Load Fonts

Standard

For example:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto:100,300,400,500,700" rel="stylesheet">

@import

For example:

<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto:100,300,400,500,700');
</style>

In practice, this is poor as loading of the fonts will block the loading of the style sheet.

css

font-family: 'Roboto', sans-serif;
font-family: 'Open Sans', sans-serif;

Google Web Font Loader

Google Web Font Loader provides full documentation.

Google Fonts Web Font Loader

Using the Google Web Font Loader improves the page speed score.

Synchronously Load

For example:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Roboto:100,300,400,500,700', 'Open Sans:300,400,600']
    }
  });
</script>

Asynchronously Load

For example:

<script>
WebFontConfig = {
    google: {
        families: ['Roboto:100,300,400,500,700', 'Open Sans:300,400,600']
    }
};

(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>

This is extremely helpful at improving page speeds. However, there is a price.

Using the Web Font Loader asynchronously avoids blocking your page while loading the JavaScript. Be aware that if the script is used asynchronously, the rest of the page might render before the Web Font Loader is loaded and executed, which can cause a Flash of Unstyled Text (FOUT).

This article discusses techniques for dealing with this.