title: How to avoid Flash of Unstyled Text (FOUT) even with Web Font Loader?
body: <p>I'm using a custom font which is large ~100kb. As you can imagine, the browser text is flashing from invisible to visible text. I therefore started using the webfontloader: <a href="https://github.com/typekit/webfontloader" rel="noreferrer">https://github.com/typekit/webfontloader</a></p>
  
  <p>However, even with this fontloader, the text still flashes. The page loads with the default font, and then once the webfontloader says the font has loaded, the CSS is triggered to use the loaded font however, it still results in the text flashing... See the codepen for example. Anytime you hard-refresh and the font needs to load, the text is flashing.</p>
  
  <p><a href="https://codepen.io/anon/pen/LQGrpL" rel="noreferrer">https://codepen.io/anon/pen/LQGrpL</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>WebFont.load({
    custom: {
      families: ['Inter UI'],
      urls: ['https://rsms.me/inter/inter-ui.css']
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,
  button {
    font-weight: 400;
    font-size: 14px;
    font-family: sans-serif;
    font-style:  normal;
  }
  
  .wf-active body,
  .wf-active button {
    font-weight: 400;
    font-size: 14px;
    font-family: 'Inter UI';
    font-style:  normal;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"&gt;&lt;/script&gt;
  &lt;h1&gt;Hello World&lt;/h1&gt;
  
  &lt;p&gt;Good day to you...&lt;/p&gt;
  
  &lt;button&gt;Thank you&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there anything I can do to avoid this flashing? It's a horrible user experience.</p>