CSS - Fonts Render Differently in Firefox and Chrome

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/

a minor difference of font rendering in firefox and chrome

I feel there is no use in trying to sort this out. A simple pen at http://codepen.io/anon/pen/dXdwmQ shows that the fonts are rendered differently. Even with reset.css. I'm checking in Windows 7. I think mac renders it correctly.

<link href="httpshttps://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" />
<style>
  body {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    background:#fff;
    font-size: 16px;
  }
</style>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Good to know at least now. Lesson learned :)

Font displays different in Chrome and in Firefox

Update: This is because each browser has its own font rendering engine.

---

I replicated your results with your current sans-serif font. The case also occurred when I changed the font to monospace.

I believe you're better off using a non-system font. For instance, I wanted to see what would happen with a typical Google font such as Open Sans, and I found that the issue did not exist when using it.

By the way, good work on that website. It looks nice. ^{TSM! TSM! TSM!}

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.

How to prevent different browsers rendering fonts differently?

Browsers, by and large, have different font rendering engines/methods. For more details, I recommend reading this, this, and/or this.

Honestly, to the average user, the difference will not be all that noticeable and for the most part, pixel-perfect cross-browser display of anything has been long abandoned as a print-world aftereffect.

If, for some masochistic reason, pixel perfection is more important than sanity and maintainable code, you can try the old standy-bys (text-in-images, image/text replacment) or turning off subpixel rendering via CSS (although not all browser support it, and the text will be less readable).

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

---

Related Topics