Geek Answers Handbook

Webfont with fonts.com is too fat

I have a problem with fonts.com fonts (specifically Avenir). I tried to ask them about this problem, but they could not reproduce it.

These two images have the same text with the same CSS, except for different sites:

Fonts.com:

Fonts.com render

My site:

My site's render

This is on Chrome on Mac. Firefox is not so bad, but still a little thicker. I haven't tested it in IE yet, but I don't think it will have the same problem.

And what is this reason? Why is the behavior in another browser / OS different?

+4
source share
2 answers

OSX sub-pixel anti-aliasing can make fonts very bold. This seems to be the problem here.

Take a look at this blown up snapshot of the text you posted:

enter image description here

See what color crop your text? This is sub-pixel smoothing.

What you can do is disable it using CSS:

.yourtext { -webkit-font-smoothing: antialiased; }

As you can probably learn from the -webkit provider prefix, this will only work for Safari and Chrome. There are hacker methods for disabling subpixel anti-aliasing in Firefox for OSX (e.g. opacity: .99 ), but I don't know if this is a good idea.

I am a little surprised that Fonts.com does not know about this, especially since they themselves disable sub-pixel anti-aliasing.

+12
source

Also, if you configured font antialiasing, as Chris Herbert explained, but the problem remains, make sure that when declaring a font with @font-face... you set font-weight instead of font-weight: normal; . font-weight: 600; seems to work best in my case, and all the rest lead to the same artificial allocated type.

0
source

More articles:


All Articles