Reducing FOUT with FOUT-B-Gone

While I’m a big-time fan of web fonts, I’m not a fan of a side effect I’ve observed in browsers like Firefox and IE. In particular, I’ve noticed that during the loading of a page, there’s a moment where web fonts aren’t applied. This is known as FOUT or “flash of unstyled type”. Coined by Paul Irish back in 2009, FOUT refers to an instance where web fonts appear briefly unstyled prior to apply the @font-face CSS rule. After the web page appears, the viewer sees unstyled fonts morph into styled web fonts. By way of example, here’s what you will see (briefly) on the initial load of pages that leverage web fonts:

You’ll notice here that the title of my blog isn’t applying a web font on the initial load. That’s because there’s a slight delay in particular browsers (i.e. Firefox and IE). It should also be noted that the delay is brief but noticeable. If you’d like to fix this, check out WebINK’s FOUT-B-Gone:

FOUT-B-Gone is a JavaScript library that inventories custom fonts used on a page and selectively hides only DOM elements that would cause FOUT. The end result of applying this to your page is a delayed rendering of text with applied web fonts. However, it is quite reliable and eliminates the artifact you’ll see otherwise. Now, I haven’t decided to apply FOUT-B-Gone to my page because I simply don’t care. However, if you are in the boat that does (or, have clients that do), this is a possible solution for you.

Comments

[Mirta - Almond legend cake recipe]

he end result of applying this to your page is a delayed rendering of text with applied web fonts.