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

22
votes

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) Screenshot

Thanks!

7
cssmacosfirefoxfonts
Welcome to the wonderful world of HTML. Just wait til you try it on a phone! – Hot Licks
Don't worry, I've been in the HTML word for a while... and I keep crying over IE every time ;). Luckily my customer also wants a mobile website, so I don't have to deal with that problem! – Ebpo
i would be careful using knockout... that font is copyright protected and is ONLY available for legal use through typography.com's cloud service... – kristina childs
@kristinachilds this was used a few years ago, by the agency for which i worked, I'm sure they acquired it legally. Thanks for the info tho :) – Ebpo
@Ebpo no worries :) it's the brand font for one of my clients and we just recently purchased it for web use so i was just lookin' out :) – kristina childs

7 Answers

60
votes

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

7
votes

you can use,

font-weight:normal !important;

for fix the visualization error on firefox Mac.

2
votes

This affects firefox browser ONLY.

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

    /* or any other option */
  }
}

Enjoy!

1
votes

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

0
votes

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.

0
votes

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.

0
votes

Found this on CSS Tricks and this freaking works.

add this to the stylesheet: -moz-osx-font-smoothing: grayscale;