Fonts intermittently failing to load?

Question

This is a very frustrating bug!

I am using Font Awesome (hosted locally) and a couple of other fonts, and they are intermittently failing to load - not 404ing, just completely failing to appear in the Network tab of Developer Tools, and not being rendered on the page.

It seems to happen most often the first time the page is loaded - on a refresh the fonts then load/render OK. However, clearing the browser cache does not reliably reproduce the issue.

I know the paths are OK, because the fonts are rendering OK about 80% of the time. This is an intermittent issue. I am using Chrome v26 on OSX.

My CSS looks like this:

<head>
... 
<link rel="stylesheet" type="text/css" href="${context}/resources/font/opensans.css" />
<link rel="stylesheet" type="text/css" href="${context}/resources/css/font-awesome.min.css" />
...

And the CSS files look like this:

@font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont.eot');
src: url('opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
     url('opensans-light-webfont.woff') format('woff'),
     url('opensans-light-webfont.ttf') format('truetype'),
     url('opensans-light-webfont.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;

}

Once more, the paths are correct (as evidenced by the fact that the fonts do render correctly about 80% of the time).

What can possibly be going on?

I haven't noticed the problem in Firefox, and I can't reproduce it now (I actually have the cache disabled in Firefox, so it should be worse if anything). Like I say: Baffling. — Richard, Apr 05 '13 at 12:17
Give this a shot: http://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files — cdwyer, Nov 22 '14 at 14:39

Louis Simoneau · Answer 1 · 2013-04-19T00:54:38.070

Same issue here. Seems to only affect Chrome. This bug in Chromium appears to describe the same issue (or something quite similar):

https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=font&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=-modified&id=229071

We're assuming it's a browser bug at the moment, though it only seems to affect some of our sites and not others so there's probably more to it than that.

Here's some things we tried without success:

Loading the font (FontAwesome) from the bootstrap CDN rather than our own servers. Still fails intermittently.
Inlining the font file as a base64 encoded string. Still fails intermittently.
Switching from FontAwesome to SymbolSet. Still fails intermittently.

score 1 · Answer 2 · answered Apr 05 '13 at 15:21

There could be many issues contributing to the observed behavior. Based on your description of the problem, it's not obvious what's going on.

I would suggest trying to reproduce the problem using WebPagetest. Check off the option to record a video so you can see the timing of paints. WPT is able to accurately simulate first view experiences, so this would be a good place to start.

Fonts intermittently failing to load?

2 Answers2