What the font is going on?

September 02, 2011

This is a general request for assistance regarding a strange font-related error.

AKA: my brain desperately needs your brain’s help.

I’ve recently added embedded fonts to this site, making use of the lovely @font-face to kick things up a notch. By and large, I’ve been rather pleased with the results. However, I’ve encountered an unusual rendering bug that I’ve never seen before and am having very poor luck locating a solution for on the web.

In short, on some Webkit browsers, some (but not all) of my readers are getting a strange text-overlapping glitch with anchor elements. I can reproduce the problem some (but not all) of the time on Chrome (13.0.782.218) in Windows 7. It seems most of the people experiencing it are using Safari on Lion or iOS, or occasionally Chrome. Which leads me to believe it’s a Webkit-related issue.

Here’s a screenshot of the issue, provided for me by reader (and man of fine taste) Alan Hogan. Additionally, you can just look at this page and if you see any funny text overlaps with anchors, congratulations, you’ve found the bug. I’ve used @font-face with plenty of client websites, and have yet to see a link behave like this before, so I’m a bit surprised at its sudden appearance here. At any rate, I’ve been stumped so far in solving it. (I’m even more stumped at it’s infrequent appearance for me in Chrome).

Stephanie (Sullivan) Rewis suggested in a tweet that it might be related to the difference in size between the text first loading in the default, non-@font-face font and then the @font-face snapping into existence. That seems fairly on-target, but it hasn’t helped me figure out how to correct what Webkit is doing wrong.

If you’ve encountered something like this before and have a solution, I’d love to hear it. Thanks in advance.

This entry was posted on Friday, September 2nd, 2011 at 10:17 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

2 Responses to “What the font is going on?”

  1. Erik Vorhes said on September 2nd, 2011 at 11:16 am:

    I can’t say for certain, since I haven’t run across this bug, but you might want to try setting { body: -webkit-text-size-adjust: 100%; } and see if that that helps things.

    Roger Johansson ran into an issue with this property (though with it explicitly set to none). So maybe explicitly setting it to 100% will solve the issue.

    I wish I could test this on my end, sorry! (And in any case, the property doesn’t show up in the inspector’s list of computed styles, even when “show inherited” is checked.)

  2. Greg said on September 2nd, 2011 at 2:42 pm:

    I haven’t run in to this particular issue, but you might try adjusting the letter-spacing and such of the fallback font (I think Arial in this case) to more closely match the visual text-flow of the embedded font. This would require creating some JS handler (unless there’s already something I’m not aware of) though, to control the styles so the manual letter-spacing would only exist before @font-face loaded and would go away after. Sounds pretty involved =/ And … it may not solve your issue … but, it just might answer the non @font-face vs default text question. Or very likely be a total waste of time.