title: google fonts - font family is loaded after page, how to fix it?
body: <p>I'm using google fonts in html:</p>
  <pre><code>    &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot;&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Open+Sans&amp;family=Roboto:wght@300;400&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>    .content-box{
      background: #f0f0f0;
      min-height: 600px;
      display: flex;
      flex-direction: column;
      width: 100%;
      font-family: 'Open Sans', sans-serif;
  }
  </code></pre>
  <p>When I refresh I see my text first in sans-serif for 0.5 seconds (while loading), then it turns to Open Sans</p>
  <p>How can I fix that?</p>