Load Fonts First or Last?

Question

Fonts compete for available bandwidth and out of necessity have to be referenced as external files, rather than being inlined as can be done with essential CSS to avoid a FOUC (Flash of Unstyled Content). There's an inherent trade-off in how you include fonts. You could go extreme towards making the page immediately useful, delaying any font download until absolutely everything else has loaded (since arguably even Javascript does more for functionality than fonts), or extreme the other way, hiding all content until fonts in use have downloaded to avoid a FOUC or reflow. And of course there are compromises in the middle, but there doesn't seem to be a best of both worlds that gets both fastest time to a useful page and guarantees no FOUC, especially if you have a lot of fonts.

How have others approached this? Are there better approaches I'm not considering? Is it just dependent on what the speed/usability/appeal goals are page to page?

Answer 1

I believe the biggest issue (from a UX perspective) is the reflow, not the FOUC. Having the cursor poised over a link only to have a reflow occur and you click on something you didn't intend to is never a good thing.

Of course perceived responsiveness is important too. Users are generally not aware of any of the @font-face trade-offs or that that lovely typeface you use isn't a standard font on their system. Because of that, they'll attribute the slowness to load your fonts as a slowness to load your site. As many studies have shown, shaving even tenths of seconds from loading time can have a pronounced effect on conversion rate. Depending on the font you're using that could mean delivering it using something like Google Fonts (which increases the likelihood that the typeface you're using has already been cached by the user's browser), it could mean subsetting the font you send to the client to just the characters and symbols you use, and it almost certainly means sending the file(s) gzipped (compressed) to reduce the time it takes for the user to see something.

Answer 2

The best thing you can do is use a font the the user already has.

• Use a totally standard font like Arial or Times New Roman, that the user will already have on their computer without downloading anything. [1]
• Use Google Web Fonts, because lots of sites use this, and you'll get some "herd caching" benefit. [2]
• Typekit.com... similar benefits as Google Web Fonts, but costs.

One option to try also, would be a use a font "web safe" font with near-identical spacing as the font you're planning on using (if available). That will minimize reflow, and some users might not notice the FUOC.

Answer 3

Try to minimize the amount of font you download. Using a CDN-hosted font will help quite a bit with this problem. It will not only increase the odds that the font is already on your user's device, it will let you only require the subsets and faces you are going to be using. It will also bring in the typefaces from someone else's server.

But, if you are loading so many webfonts that speed becomes an issue, here's something you can try.

Create 2 stylesheets (or more) one, which contains only the @font-face rules and the other(s) that contains everything else including your font-family rules and an @import to bring in the @font-face sheet. @import happens asynchronously and the new faces will be applied as soon as they are available.

The result is instantly styled content and a slight change in type not too soon after.