CODEWITHSUNDEEP
csscross-browserfont-face
user1065425
user1065425

Reputation:

@font-face: bold in FF is bolder than in Chrome

I used this code:

@font-face {
    font-family: 'DroidSansRegular';
    src: url('droidsans-webfont.eot');
    src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-webfont.woff') format('woff'),
         url('droidsans-webfont.ttf') format('truetype'),
         url('droidsans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSansBold';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

and when I using font-weight: bold; then bold text in Chrome is ok, but in Firefox is too much bolder.

How to solve this?

PS: I have to use the fonts from local files.

Upvotes: 20

Views: 23433

Answers (10)

Abdul Wajid
Abdul Wajid

Reputation: 61

After looking into the problem, I found a solution that worked. I applied some CSS properties, and they fixed the issue. Here’s what I did:

First, I set the font for the body to 'Libre Baskerville' with a serif fallback, you can set the font according to your need. Then, I added properties for font smoothing. This makes the text look better on screens by reducing jagged edges. Here’s the CSS code:

body {
    font-family: 'Libre Baskerville', serif;
    -moz-osx-font-smoothing: grayscale;
}

I also needed to make sure the font weight was normal in Firefox. To do that, I used a special CSS rule that only affects Firefox. Here’s that part of the code:

@-moz-document url-prefix() {
    body {
        font-weight: normal;
    }
}

Upvotes: 0

user1458767
user1458767

Reputation: 1

@-moz-document url-prefix() {
  body h3{
    font-weight: normal;
    font-style: normal;
  }
}

this worked for me!

Upvotes: 0

Lanti
Lanti

Reputation: 2329

I used Alex's solution:

@font-face {
    font-family: 'SomeFont';
    src: url('fonts/somefont-webfont.eot');
    src: url('fonts/somefont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/somefont-webfont.woff') format('woff'),
         url('fonts/somefont-webfont.ttf') format('truetype'),
         url('fonts/somefont-webfont.svg#SomeFontRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SomeFont';
    src: url('fonts/somefontbold-webfont.eot');
    src: url('fonts/somefontbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/somefontbold-webfont.woff') format('woff'),
         url('fonts/somefontbold-webfont.ttf') format('truetype'),
         url('fonts/somefontbold-webfont.svg#SomeFontBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

Which is still not worked in Firefox v24... Today, on 2013. october 28. the bold @font-face problem is still exist.

After a little search, I found this solution here: https://support.mozilla.org/hu/questions/801491

What did work, at least until Mozilla corrects this issue in an update (2011.03.27...), was turning off Hardware Acceleration. Go to Tools->Options | Advanced | General tab | Uncheck "Use hardware acceleration when available". I'm sure this hits performance in some way but so far it is working out fine.

Which is sad that you really can't do anything about the bold fonts in Firefox... You really not have option to turn this off on user's machines. Hardware Acceleration is really important. I guess you just need to live with it. They didn't fixed this in the last 3-4 years. Probaby they won't fix this in the future.

However, I noticed that maybe this issue not affecting the externel javascript fonts (for example: Typekit, EdgeFonts).

Hope that Chrome will find its way on more and more user's PC...

UPDATE:

It's possible only to turn off parts of the hardware acceleration. Tutorial here: http://www.mydigitallife.info/fix-firefox-4-fade-blur-bold-bad-and-ugly-font-rendering/

Also mentioned an another solution: turn off anisotropic filtering for Firefox in your graphic card's settings page (but this is not works for me).

Upvotes: 0

kristina childs
kristina childs

Reputation: 2210

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

Upvotes: 42

hsivonen
hsivonen

Reputation: 8026

You have specified two faces in two different families. You have defined a regular face in a family called “DroidSansRegular” and you have defined a bold face in a family called “DroidSansBold”. The design of CSS expects you to define those as two weights of one family. If you make both say font-family: "DroidSans";, then you can use a font family called “DroidSans” and when you ask for bold, you get the bold face from that family.

(Oops. The chosen answer already gave the correct solution but didn’t quite explain what was wrong.)

Upvotes: 1

Harry
Harry

Reputation: 3391

My problem was that the text that was "more bold" was within a h1 tag. I just added the following to my CSS and it fixed the problem! :)

h1,h2,h3,h4,h5,h6{
    font-weight:normal;
}

Upvotes: 0

Alex
Alex

Reputation: 1609

The issue is that Firefox tries to add the bold affect to text even for custom fonts that are already bold. I've just had the exact same situation, and resolved it by setting font-weight: normal; on the @font-face declaration.

Example:

@font-face {
    font-family: 'DroidSansBold';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

You'll also need to use font-weight:normal; on any element (e.g. h1, h2, etc) that would otherwise have font-weight:bold; set otherwise Firefox will still add bold to the custom font.

Upvotes: 2

Florian Rachor
Florian Rachor

Reputation: 1574

The Problem here is that FF takes the font and applies the bold font-weight to it (So basically it doubles the effect). Chrome doesn't seem to change the font-weight and just uses the right font. I think this happens because you declare two different font-families. The right CSS for this case would be:

@font-face {
    font-family: 'DroidSans';
    src: url('droidsans-webfont.eot');
    src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-webfont.woff') format('woff'),
         url('droidsans-webfont.ttf') format('truetype'),
         url('droidsans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSans';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

Notice that I changed the font-family to "DroidSans" not "DroidSansRegular" and "DroidSansBold".

Upvotes: 25

sethasaurus
sethasaurus

Reputation: 142

Typically JavaScript based fonts render better, although everything is going to look different in different browsers because of the rendering engines. You'll even notice a difference between Windows & Mac with the same browser.

Typekit tends to be my favorite choice. Google fonts do pretty well also. I think DroidSans is an option at Google or Typekit.

Upvotes: -1

cdeszaq
cdeszaq

Reputation: 31280

In a nutshell, there really isn't a way to solve this due to the slight differences in rendering engines and internal settings used by each browser. (as @LainBallard alluded to).

If you really need to have pixel-perfection, your only real hope is to use images, but I would try to tweak your design so that you don't need the pixels to match exactly.

Upvotes: -2

Related Questions