Search code examples
cssgoogle-chromefirefoxfont-facetruetype

@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.

Solution

  • 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...