Avoiding a FOUT with Data URIs

A big issue with @font-face is the FOUT, or Flash of Un-styled Text. Paul Irish has a great article on the problem, with updates covering the evolution of the quirk in newer browsers (FF4 getting a little better, IE9 being a mixed bag).

Several of the solutions that are out there use JS to hide your @font-face content whilst the font file is loading, essentially matching what non-FOUT browsers are doing anyway. This is okay, but it still can create a noticable gap between the rendering of the page and the display of the styled text.

The article above mentioned data URIs as another route that still caused the flash; I couldn’t find a working demo to show that, so I made one to test it out. Curiously, not seeing a FOUT in the big trouble environments (FF3.6 & IE9), plus I’m not seeing much of a snap-on flash in the better browsers. Also using conditional comments and media queries to serve EOT type to older IEs / keep the data URI workaround to where it’s supported.

It’s possible that this wouldn’t fly as well with more complex sites, or maybe there’s a difference between the formats (I used TTF in my test). So eh, still worth a gander if you’re bothered by FOUT-y sorts of things.

Check it: http://georgepantazis.com/demos/fontface-datauri/

Categories: Development Experiments |