Our method of preventing FOUT (flash of unstyled text) is optimized; we use a single class to hide only the text for elements using Web fonts. We then strip that class’s properties when the Web fonts are ready to display. One thing to note is that the class is left on these elements in the DOM; however, without properties the class has no meaning and is invisible to visitors, save for those using some manner of developer tools.

If you’d like, you can add an additional configuration variable that will tell our script to remove class once it’s no longer necessary:

<script type="text/javascript">
    // first, create the object that contains
    // configuration variables
    MTIConfig = {};

    // next, add a variable that will control
    // whether or not FOUT will be prevented
    MTIConfig.EnableFOUT = true // true = prevent FOUT

    // finally, add a variable that controls
    // whether or not to leave the mti_font_element class in the DOM
    MTIConfig.RemoveMTIClass = true; // true = remove when finished
</script>

Please note that removing the class is disabled by default; the removal requires a fair amount of overhead for the script to successfully ensure that all elements no longer have the class assigned.