title: Load Google Font with <link> asynchronously or deferred without Font Face Observer
body: <p>I want to use the Google Font &quot;Noto Serif&quot; for my website.
  My problem is that when I am testing it with Google PageSpeed Insights, it says everything is perfect except for one thing:</p>
  <p><code>&lt;link href=&quot;https://fonts.googleapis.com/css?family=Noto+Serif&quot; rel=&quot;stylesheet&quot;&gt;</code></p>
  <blockquote>
  <p>Your page has 1 blocking CSS resources. This causes a delay in
  rendering your page. None of the above-the-fold content on your page
  could be rendered without waiting for the following resources to load.
  Try to defer or asynchronously load blocking resources, or inline the
  critical portions of those resources directly in the HTML.</p>
  </blockquote>
  <p>I am aware of a bad solution for this.  It's to link the font using <code>&lt;script&gt;</code> at the bottom of the HTML file.  The problem with that solution is it causes a Flash of Unstyled Text every time you click on something in my website.</p>
  <p>I am using jekyll hosted with GitHub Pages, so I don't think I can install Font Face Observer :(</p>