I’m using an SVG font in Chrome.
From time to time, the glyphs seem to end up with a width of zero. This means if I have the character all by itself, it’s parent container gets a width of zero, so it is basically not shown. If it’s parent has other things, it’ll appear behind the font.
So, if I have “+” with the custom font, it winds up invisible because it seems the glyph has a width of zero.
If I have something like
“+” Cookie
, I see Cookie, and the + is the custom font and is behind the word “Cookie”.
I’m not sure if it is a Chrome-specific issue, a .svg font specific issue or what. And the weird thing is it only happens sometimes. Occasionally it will start with a refresh, then persist through several refreshes. Eventually it’ll go away (generally when the cache is cleared).
It doesn’t seem to be a corrupt file download either, since comparing the content length of the response that works and when it doesn’t is the same… though I’m not prepared to rule anything out.
Thanks.
Apparently this is a bug in the current version of Chrome: http://code.google.com/p/chromium/issues/detail?id=95102
According to that, it should be fixed in Chrome version 24 (the next one).
We had a font stack of eot, svg, woff and ttf. To “fix” the issue, we’ve moved woff above svg, so that is used instead. This seems to resolve the problem.