Webkit troubled by very small fonts preceding @font-face text
Earlier this month, I was styling a site, when I discovered a strange bug in Safari and Chrome (both Webkit) where any @font-face text would not be anti-aliased (smoothed) if it appeared after a block of pre-formatted text (text between <pre> and </pre> tags) that was small enough to not be smoothed. By no means am I an expert in fonts or browsers’ rendering engines, but I am curious what might be causing this.
The site I discovered the problem on was using Roadgeek 2005 Engschrift Regular and, so far, the only font that I’ve been able to produce this issue with is Roadgeek. Oh, and for some more fun with fonts, select some of the text and watch it render properly.
Hello, I am pre-formatted text.
And I am @font-face text (Roadgeek Engschrift)
However, If the pre-formatted text is large enough to anti-alias, then the problem disappears:
Hello, I am pre-formatted text.
And I am @font-face text (Roadgeek Engschrift)
Here is a screenshot, in case you aren’t using a Webkit browser, or your browser isn’t producing the issue above:
I thought I’d try to produce the issue with other HTML tags, just to see if it was limited to <pre> tags. No dice. It seems to be limited to fonts that stop smoothing at a certain size.
Hello, I am a very small paragraph.
And I am @font-face text (Roadgeek Engschrift)
1 Comment for Webkit troubled by very small fonts preceding @font-face text
Tweets that mention Webkit troubled by very small fonts preceding @font-face text - Blankfield.net -- Topsy.com | 2010/04/23 at 19:27
[...] This post was mentioned on Twitter by Paul Irish, Eric B. Eric B said: . @fontsquirrel, here is that @ font-face anti-aliasing issue I was talking about. Seems to be font-dependent. http://bit.ly/bugface [...]