title: Including Google Fonts link or import?
body: <p>What is the preferred way of including Google Fonts on a page?</p>
  <ol>
  <li>Via the <code>&lt;link&gt;</code> tag
  <pre class="lang-html prettyprint-override"><code>&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
  &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
  &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  </code></pre>
  </li>
  <li>Via import in a stylesheet
  <pre class="lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&amp;display=swap');
  </code></pre>
  </li>
  <li>Using the <a href="https://github.com/typekit/webfontloader" rel="noreferrer">Web Font Loader</a></li>
  </ol>