Fonts Looks Different in Firefox and Chrome

Fonts looks different in Firefox and Chrome

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

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

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.

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.

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 Safari, Firefox and IE than on Chrome

That's ordinary, there are drastic differences from browser to browser on how the actual rendered text looks. The important thing here is that no matter how much control you try to exert over text, in the end, you don’t get much. Not to mention most browsers are able to let users re-size and override font settings on the fly.

Check this article:
Font Rendering Differences: Firefox vs. IE vs. Safari

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!}

Why does my font-size display differently on firefox vs. chrome mobile browsers?

Every browsers have different default values, even though most of them are same.

Designers usually tackle this problem by normalizing/reseting the default browser values using a Normalize Script.

You can read about this more in this article.

---

Related Topics