How to avoid Flash of Unstyled Text (FOUT) even with Web Font Loader?

Question

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: https://github.com/typekit/webfontloader

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.

https://codepen.io/anon/pen/LQGrpL

WebFont.load({
  custom: {
    families: ['Inter UI'],
    urls: ['https://rsms.me/inter/inter-ui.css']
  }
});

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<h1>Hello World</h1>

<p>Good day to you...</p>

<button>Thank you</button>

Is there anything I can do to avoid this flashing? It's a horrible user experience.

Answer 1

Consider experimenting with the Web Font Loader library which provides an event system that allows you to control the appearance of your page dynamically as fonts are loaded.

Here