Home/ Questions/Q 9126741
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T07:06:41+00:00

I’m having a problem with fonts.com fonts ( Avenir in particular ). I’ve tried

  • 0

I’m having a problem with fonts.com fonts ( Avenir in particular ). I’ve tried to ask them about this problem, but they couldn’t reproduce it.

These two images are of the same text with the same CSS, except different sites:

Fonts.com:

Fonts.com render

My site:

My site's render

This is on Chrome on a Mac. Firefox isn’t as bad, but still a bit thicker. I haven’t tested it in IE yet, but I don’t think it’ll have the same problem.

So what’s causing this? Why is behaving differently in the same browser/OS?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Subpixel antialiasing on OSX can make fonts look quite bold. That seems to be the issue here.

    Look at this blown up shot of the text that you posted:

    enter image description here

    See that color fringing around your text? That’s subpixel antialiasing.

    What you can do is turn it off using CSS:

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

    As you can probably tell from the -webkit vendor prefix, this will only work for Safari and Chrome. There are hack-ish methods of disabling sub pixel antialiasing in Firefox for OSX (like opacity: .99) but I don’t know if they’re a good idea.

    I’m a little surprised that Fonts.com isn’t aware of this, especially since they are disabling sub pixel antialiasing themselves.

    • 0