@Font-Face: Bold in Ff Is Bolder Than in Chrome

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

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

CSS - Fonts Render Differently in Firefox and Chrome

I have been testing a few things out, and I've found some way to make sure that Firefox doesn't show an inconsistent font weight.

I can use some jQuery to detect the browser, and from there I can add browser-specific styles. In this case, I've added a font-weight to the title block so that it has a lighter font-weight, which creates a cleaner look:

On the left is Firefox with font-weight: 400, and on the right, Chrome with font-weight: 600. See below for my browser-detecting jQuery.

if (navigator.userAgent.search("Firefox") >= 0) {
    $('body').addClass('firefox');
}

My CSS is as follows:

body.firefox h1 {
     font-weight: 400;
}

It's not necessarily a fix, however it removes the choppy-ness of the font weighting.

Please feel free to comment about any better ways of doing this, or with a more practical solution to the question.

Many thanks.

Fonts looks different in Firefox and Chrome

css reset may fix the problem, I am not sure .

http://yuilibrary.com/yui/docs/cssreset/

Custom font different across browsers (Safari/Chrome/Firefox)

The font size is the same, but your letters in Chrome are bolder than in Firefox. That's because you are importing your fonts wrong.

Currently you are using:

@font-face {
  font-family: "Cobury Regular";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Cobury Bold";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

... {
  font-family: "Cobury Regular";
}
... {
  font-family: "Cobury Bold";
}

But the correct way would be:

@font-face {
  font-family: "Cobury";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cobury";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
  font-weight: bold;
  font-style: normal;
}

... {
  font-family: "Cobury";
  font-weight: normal;
}
... {
  font-family: "Cobury";
  font-weight: bold;
}

Always use font with their actual font-weight. Don't treat the same font with different weight and style like different fonts.

Your .woff font files have implemented meta tags inside, which telling the browser what thickness the letters have. If the provided font-weight in the import statement @font-face doesn't match with that, browsers will treat that differently, because there is no standard for that. (Chrome tries to handle the situation by adding a additional thickness to the already bold font, for whatever reason.)

Edit:
I'm seeing that you use h1, .text-logo #logo { font-weight: 900; ... in your CSS but you have never defined the font with the weight number 900. Please use only the weights you have provided via @font-face. (With my suggestion it would be normal and bold)

font weights differing in webkit and firefox

I've had luck with this in the past for pesky webkit fonts displaying bolder than intended:

-webkit-font-smoothing: antialiased;

I would also recommend using a CSS @font-face to display Helvetica Neue fonts. Helvetica Neue is not on all computers and operating systems by default. Hope this helps! :)

Same font except its weight seems different on different browsers

Be sure the font is the same for all browsers. If it is the same font, then the problem has no solution using cross-browser CSS.

Because every browser has its own font rendering engine, they are all different. They can also differ in later versions, or across different OS's.

UPDATE: For those who do not understand the browser and OS font rendering differences, read this and this.

However, the difference is not even noticeable by most people, and users accept that. Forget pixel-perfect cross-browser design, unless you are:

1. Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly...)
2. Using images (resources are demanding and hard to maintain)
3. Replacing Flash (need some programming and doesn't work on iOS)

---

UPDATE: I checked the example page. Tuning the kerning by text-rendering should help:

text-rendering: optimizeLegibility; 

More references here:

1. Part of the font-rendering is controlled by font-smoothing (as mentioned) and another part is text-rendering. Tuning these properties may help as their default values are not the same across browsers.
2. For Chrome, if this is still not displaying OK for you, try this text-shadow hack. It should improve your Chrome font rendering, especially in Windows. However, text-shadow will go mad under Windows XP. Be careful.

Fonts look different on Firefox and IE than on Chrome

Answer to my question was having different font weights, e.g. if you have google fonts then make sure you have light(300), regular (400), medium (500), bold (700) versions imported.

---

Related Topics