Last Updated: January 02, 2018
·
414
· nathansmonk

CSS partial selector for defeating Flash of Unstyled Text

If you use the Adobe/Typekit webfontloader code (https://github.com/typekit/webfontloader) to load fonts from different providers, then the flash of unstyled text has probably reared it's ugly head.

There is a sweet piece of CSS that you can drop in, to prevent this from happening:

[class*="-loading"] {
visibility: hidden;
}

This is a partial match for classes containing -loading, which is applied in the html element (appended to the font name).

You might want to apply this to both the html element only and then target text elements within the page to make this more performant.