How to reduce font weight in Firefox on Mac with CSS?

Question

Here\'s my problem: I\'m using font-face for the menu of my website, but Firefox on Mac displays it too bold On a PC, everything works well, the font is perfectly sized and

Answer 1

There is trick explained http://dave-bond.com/css/font-too-bold-on-a-mac/ basically is to apply opacity: 0.99; to those texts...

Answer 2

Every font supports different weights. Some can be really thing, others can't.

Mac and PC will render the same font differently. It's a core operating system thing, and basically, there's nothing you can do about it. :(

Most consistent results can be achieved using something like Google Webfonts or TypeKit.

One of the thinnest fonts standard on Mac is Helvetica Neue.

Also worth noting that font-weight supports values 100,200,...800,900.

Answer 3

FireFox posted a resolution to this today on their bug forum. It was just finalized today so won't be in use for a while, but we should all put

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

in our body tag to reset this for all browsers. FINALLY!! man, that made my day! This should come out in the next FF release.

thread here https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Answer 4

you can use,

font-weight:normal !important;

for fix the visualization error on firefox Mac.

Answer 5

This affects firefox browser ONLY.

@-moz-document url-prefix() {
  .classname {
    font-weight:normal;

    /* or any other option */
  }
}

Enjoy!

Answer 6

I've found that making a slightly "lighter" version of the icons is the best way to compensate for this. They're passable in Firefox, and ever-so-slightly lighter in all other browsers. In Illustrator, I create a 16px icon. I resize it to 1024px, and apply an offset path of -6px (these are the numbers that worked best for me). I then export that as a svg, and import it into IcoMoon to build the icon-font. I don't use -webkit-font-smoothing:antialiased (or the pending -moz-osx-font-smoothing: grayscale) unless it's a light icon over a dark background. This is the best way I've found to get icon-fonts to display (mostly) uniformly across browsers & platforms.