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:

Answer 1

after ages messing around i came up with this:

add a class in your css file:

.showMe {
  filter: opacity(1) !important;
  transition: filter 878ms ease-in;
}

then add a javascript tag at the very end of your document just before the closing body tag.

include in the file

setTimeout(function() {
  let h1 = document.getElementsByTagName('h1')[0];
  h1.classList.add('showMe');
}, 288);

Seems to be working for me as i was having the same issue. Can play around with the timing of setTimeout to optimize which is the number at the end (in milliseconds). You could also add a transition onto this so it fades in more smoothly & also add will-change:auto; or will-change:filter; but I'll let you mess around and see what suits you. forgot to mention you need to add style="filter:opacity(0);" on the h1 in your html mark-up.

As an alterative you could have the text set to opacity 0 in your html and then use the .animate() api to fade the text in slowly when the page has fully loaded.