I’ve been having an issue lately with fonts that are imported using @font-face. They appear fine in IE9 but are distorted and barely legible in Firefox 8 and Chrome 15.
Please consider the following image:
Anyone know what’s going on here?
Cheers!
It be a little hard to tell what is happening from the image alone apart from the obvious, i.e. that they aren’t rendering correctly. So perhaps an actual code sample or link to the page in question might help.
Can’t quite state it as a fact, but i believe that Gecko (Firefox) & WebKit (Safari and Chrome) based browser’s don’t work well with windows ClearType.
The font you’re using probably is not properly hinted and thus cannot display correctly in the size you chose.
You could change the font size to match the fonts “native” size and get proper display or ultimately choose another font.
I think you are dealing with a poor font. What is the font you are using? Where did it come from?
Also what OS version are you viewing these on. And if you by chance have a link to the page I can take a look and let you know more why it is doing this.
Brad
A link to the page or font should clear this up. zbing might be on the money with the ClearType.
What font is that though? It doesn’t look “too” custom, you might be better of using a web safe font that looks similar…
Based on how the letters are rendered in your screenshot of Fx8/Cr15 it looks like ClearType isn’t even turned on as I can see no evidence of antialiasing. (Where they taken on the same computer/OS?)
One other thing to keep in mind is that a lot of @font-face embedded fonts look really crappy at small sizes (< 16-18px)
Cleartype, a microsoft technology for better rendering of fonts, works better in MS products.
Disable cleartype then look at your fonts in IE.
Also, the effect you see happens with almost all fonts using @fontface and firefox/chrome/etc
Only if the relative values cause rounding errors. If the relative percentages/ems are correct (you can use a tool like this to get your relative sizes accurate), the fonts will render correctly. Or you can try using [URL=“http://snook.ca/archives/html_and_css/font-size-with-rem”]rem, though support for that is incomplete at this point.