I loaded an aller font onto this website for the header tags. I have a ttf, eot, woof, and otf loaded. It was originally a ttf and I used a converter to convert the others. Any idea why it would look good on firefox and ie but not on webkit browsers? I did try putting this in the body -webkit-font-smoothing: subpixel-antialiased !important; and it did nothing.
Should I use a different font? What would be a good one to use for my headers?
I have noticed recently a lot of the non-standard fonts I have been using look terrible in Chrome, not necessarily all Webkit browsers though. Even when using Google fonts, go figure. I believe it is just the way these browsers render the font and there isn’t much you can do about it.
I’ve run across a lot of bad looking fonts in Chrome on Windows, but the same fonts looked great in the Mac version of Chrome. With a little further research it turns out that Chrome in windows, for whatever reason, uses a software approach for anti-aliasing fonts, while Firefox and IE9 use hardware accelerated DirectWrite to accomplish the same task. This is only an issue on Windows, as it has to do with DirectX. Sorry, no solution, but maybe with some more awareness, Google can add some hardware anti-aliasing to Chrome.
You had my hopes up!
Just tried it and it didn’t work for me. I tried the code on some Google Web Fonts that I’ve known to have some issues in the Windows version of Chrome and Safari. The way I understand it, it is more dependent upon the anti-aliasing process. Chrome for Windows does anti-alias but just not as good as what DirectX can do. I looked into the above code, and it seems to only affect WebKit browsers on the Mac. Anyone else have any experience with this? I would love to be proved wrong!
You can impose a hack and add
text-shadow: 0 0 1px rgba(###,###,###,.5)
but that doesn’t really address the issue.
Try using the fontsquirrel.com @FONT-FACE GENERATOR with your fonts and click the expert settings. I can’t remember off the top of my head at this time without going to fontsquirrel, but I believe there used to be a setting to help font rendering. Anyway for what ever reason it generates fonts better then most. I had the same issue with chrome fonts and a lot better luck generating my own. Good luck.
You must be logged in to reply to this topic.