Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
3  
Personally I really dislike it when fonts change after load, don't have any data though –  Ben Brocka Jun 12 '12 at 3:16
4  
Please don't assume everybody knows / agrees on what abbreviations stand for. The FOUC abbreviation was new to me even though what it stands for isn't. –  Marjan Venema Jun 12 '12 at 6:43
    
Including fonts in an external stylesheet turns out to prevent text from ever rendering if the font times out in many browsers: stevesouders.com/blog/2010/06/01/frontend-spof (spof stands for Single Point Of Failure). –  Chris Moschini Jun 12 '12 at 19:23
    
All designers hate when the page loads and then adjusts to the look they want. All users just want the content. ;) –  DA01 Jun 12 '12 at 20:23
add comment

3 Answers 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.

share|improve this answer
    
Your proposed solution causes the FOUC/reflow issue that the OP is worried about. I do agree on using CDN-hosted fonts wherever appropriate, though; services like Typekit should make it far more likely that you're getting a primed cache. –  Kit Grose Jun 13 '12 at 3:12
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
+1 on the reflow –  mare Jun 12 '12 at 14:24
2  
I agree on the reflow. The challenge there goes in many directions though: Convincing the designer not to use a custom font for main content, or if you can't, potentially hiding the main content or styling links as plaintext until the font loads. I do wonder what the cache hit rate is for your average font with Google Fonts. –  Chris Moschini Jun 12 '12 at 19:22
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.