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

As pointed in this link https://binarapps.com/blog/fout-with-web-font-loader/, you can hide the text until it's ready to be shown, like this:

body,
button {
   font-weight: 400;
   font-size: 14px;
   font-family: sans-serif;
   font-style:  normal;
   visibility: hidden;
}

.wf-active body,
.wf-active button {
    font-weight: 400;
    font-size: 14px;
    font-family: 'Inter UI';
    font-style:  normal;
    visibility: visible;
}

You can also add a transition on the opacity and a loader that is only visible when the body has the .wf-loading class (see the link for further explanations on these suggestions).