Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Avoid delayed load of font-face

Tags:

html

css

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?

like image 978
Denny Mueller Avatar asked Jul 20 '12 12:07

Denny Mueller


People also ask

Should you preload fonts?

In summary, without font preloading, you might run into a situation where a browser is ready to load your site's text, but it can't because the font isn't available yet. That is, it needs to download the font before it can paint the text.


1 Answers

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.

like image 181
Su' Avatar answered Oct 23 '22 13:10

Su'