title: Gatsby.js: Load Google Fonts for Typography themes without Render-Blocking
body: <p>I'm using <a href="https://www.gatsbyjs.org/" rel="noreferrer">Gatsby.js</a> and its <a href="https://kyleamathews.github.io/typography.js/" rel="noreferrer">Typography</a> plugin with the <a href="https://kyleamathews.github.io/typography.js/" rel="noreferrer">Irving theme</a>.</p>
  
  <p>This theme requires the Google Fonts <a href="https://fonts.google.com/specimen/Exo" rel="noreferrer">"Exo"</a> and <a href="https://fonts.google.com/specimen/Yrsa" rel="noreferrer">"Yrsa"</a>, and adds an import to the <code>&lt;head&gt;</code> section of the exported static html files:</p>
  
  <pre><code>&lt;link href="//fonts.googleapis.com/css?family=Exo:700|Yrsa:400,700" rel="stylesheet" type="text/css"/&gt;
  </code></pre>
  
  <p>This import is render-blocking content and I'd prefer to avoid it if possible for both users and my Google PageSpeed Insights score.</p>
  
  <p>I tried using <a href="https://github.com/didierfranc/gatsby-plugin-google-fonts" rel="noreferrer">gatsby-plugin-google-fonts</a> and added the following to my <strong>gatsby-config.js:</strong></p>
  
  <pre><code>{
    resolve: `gatsby-plugin-google-fonts`,
    options: {
      fonts: [
        `Exo\:700`,
        `Yrsa\:400,700`,
      ],
    }
  },
  </code></pre>
  
  <p>However this just adds a second import call. Should I be placing them in the static directory? Even then, how can I configure Typography to still use these fonts without importing them separately?</p>