html - Avoid delayed load of font-face

Question

Is there any actual way to avoid the delayed load of font-face?

There is a blogpost from Paul Irish about this FOUT (flash of unstyled text). Its from 2009.

Is there any progress in the last 3 Years?

Answer 1

You're bringing up two separate issues.

A delay in downloading the actual font files is essentially unavoidable, though you can help it by not including anything you don't actually need, so as to minimize the file size overall. Depending upon what service/method you're using, this might entail reducing what character sets(/languages) you include, as well as weights and styles.

As to the flash of unstyled text, that's semi-unavoidable, partially due to the downloading time issue above. But once you've reduced that as much as you can, you should implement a font loader to take better control of this part. Here's TypeKit's (open-sourced) implementation, and a brief explanatory blog post. The example at bottom specifically addresses FOUT; you can pretty much just drop it into your own code.
Here's some information from FontDeck on using Google's loader with their service, which will also lead to using same for Google's WebFonts service.

Any other service, you'll have to start doing your own research, but those are the general concepts. With those tools, you can use a bit of scripting and CSS rules to hide the affected text until the fonts are ready for presentation, among some other uses. It's not completely idea, but at least prevents the FOUT. Once past that initial time, the browser's cache should take over and make it largely moot.