CODEWITHSUNDEEP
cssgoogle-chromefirefoxfont-facetruetype
Philll_t
Philll_t

Reputation: 4437

@font-face font rendering doesn't go very well on windows

I've been working recently with @font-face and started testing on my vbox. Turns out the fonts are not being rendered very well. I researched Firefox and all I kept seeing was turn hardware acceleration off. We can't expect every user to do this. Chrome does this too. Tried the Anti-aliasing property and no luck. You can see a picture of the results bellow: enter image description here

[Win] FireFox, Chrome [Mac] Chrome, FireFox

As you can see the two left are rendered very poorly, while the two right are awesome. They are using this:

@font-face{
  font-family: "gBok";
  font-weight: bold;
  font-style: normal;
  src: url(/font/gotham-bold.ttf) format("truetype");
}
@font-face{
  font-family: "gBok";
  font-weight: normal;
  font-style: normal;
  src: url(/font/gotham-book.ttf) format("truetype");
}
label {
font-family: "gBok", Helvetica, serif;
font-weight: bold;
}

Is there something I'm doing wrong? Any advice? Thank you very much for your time.

Upvotes: 0

Views: 864

Answers (2)

Pevara
Pevara

Reputation: 14308

It is indeed a known isue and a real pain! I usualy remove the fontface for bold, and let the OS generate it's own bold version. It sometimes gives better results, though not perfect. It is worth a try though...

Upvotes: 1

Rich Bradshaw
Rich Bradshaw

Reputation: 73045

This is a known bug with Chrome – their font rendering on Windows is pretty rough. Don't use the anti aliasing thing, when they eventually fix it, that will make it look worse! https://code.google.com/p/chromium/issues/detail?id=137692

Upvotes: 0

Related Questions