Google web font displaying strangely at certain pixel sizes on Chrome/Mac
I'm using the Google Web font "Buenard" and having a difficult time getting it to display on Chrome. I know there are issues with font rendering and hinting across the various browers, but this is something else altogether. Instead of the intended font, Chrome is displaying some other dingbat font on my system. It looks great in Safari.
I can't share a link, because the site in question is behind a protected login. However, check out this screenshot to see what I'm looking at: http://bit.ly/ImiiDM
In the CSS, I am using a font stack of '"Buenard", Georgia, "Times New Roman", serif;' I tried also just using '"Buenard", serif;' No effect.
Any ideas?
Instead of using stylesheets to attach the font just search the web for your desired font and download it and attach it like so:
@font-face {
font-family: buenard;
src: url('buenard.ttf');
}
After that you can use it just like a normal CSS declaration:
p.custom_font{
font-family: buenard; /* no .ttf */
}