15

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?

Denny Mueller
  • 3,505
  • 5
  • 36
  • 67
  • 6
    When you reference information you've come across, it's generally a good idea to actually link to it. – Su' Jul 20 '12 at 13:34
  • This is a new post regarding this topic I found helpful: https://michael.stapelberg.de/Artikel/font-loading – Matthias M Aug 29 '17 at 08:33

2 Answers2

9

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.

Su'
  • 2,128
  • 20
  • 22
  • 4
    `try{Typekit.load();}catch(e){}` from TypeKit's implementation pretty much says it all - the document won't render until the script runs so, if you don't mind making your users wait an extra amount of time (hopefully measured in milliseconds) then this works... if you care about making your page as fast as possible, this doesn't work. (... and if users don't stick around long enough to see your site *finish* loading, it doesn't really matter what your site looks like :) – danlefree Jul 20 '12 at 13:57
  • 1
    It's worth mentioning data-uri embedded fonts as an option. Avoids extra http requests. – jason Jul 29 '12 at 18:05
0

A) Cache the fonts by setting the Cache-Control and Content-Type correctly:

Cache-Control:public, max-age=15552000
Content-Type:application/x-font-woff;charset=UTF-8 (differs for other font files)

B) Avoid https for the Vary Header. Only set Accet-Encoding. The Vary:https breaks IE font loading.

Vary:Accept-Encoding

https://github.com/typekit/webfontloader

C) A and B should work perfectly after the first request, when the browser already has loaded the font. If this is not sufficient try Web Font Loader.

Matthias M
  • 12,906
  • 17
  • 87
  • 116