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 looks like it should

Unfortunatly, on Mac, i have to had a CSS hack for Safari (which works), but I didn't find anything similiar in Firefox.

I've tried the "text-shadow hack", i tried using the font-weight property (which pretty much doesn't do anything).

And now, some code!

@font-face {     font-family: 'KnockoutHTF48FeatherweightRg';     src: url('font/knockout-htf48-featherweight-webfont.eot');     src: url('font/knockout-htf48-featherweight-webfont.eot?#iefix') format('embedded-opentype'),          url('font/knockout-htf48-featherweight-webfont.woff') format('woff'),          url('font/knockout-htf48-featherweight-webfont.ttf') format('truetype'),          url('font/knockout-htf48-featherweight-webfont.svg#KnockoutHTF48FeatherweightRg')     format('svg');     font-weight: normal;     font-style: normal;  } 

For Safari:

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

Left if FF on Mac and right is FF on PC (the good version)

Thanks!

Answer 1

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 2

you can use,

font-weight:normal !important; 

for fix the visualization error on firefox Mac.