How to Prevent Different Browsers Rendering Fonts Differently

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.

Font looks different in different browsers?

Because font-family: sans-serif; is set, each browser set's their own standard font. This can ofcourse differ between different browsers.

In chrome, you can set the default fonts at chrome://settings/, under advanced settings.

In safari it is less easy, but I could find this post.

---

In reaction to your edit, you should always define a font stack in CSS to ensure that the correct font is shown.

A font stack is a stack of fonts, used to define different fonts to be chosen. It looks as follows:
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

This defines Arial as the standard font. If however Arial is not found, Helvetica Neue is chosen. If that font is also not present, Helvetica get's set. In the very unlikely case that even Helvetica isn't present, the standard sans-serif font, set by the browser, is chosen.

For reference, you could check out this website. It has a lot of standard font stacks you can use in your CSS.

Fonts looks different in Firefox and Chrome

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

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

Issue with custom icon font rendering differently in different browsers

So I found the problem myself. There might be a better solution but this one solved it for me. Feel free to still reply with your solution.

http://icomoon.io/#docs/font-face

A Crisp Size is listed for each of the icon sets in IcoMoon's library
tab. To get the best results, you should use this size when using your
font. For example, if an icon set is optimized for (16 × N)px sizes,
you will get crisp results by setting your font-size to 16px, 32px,
48px (= 3 × 16px), etc.

Basically you want to avoid importing a different size SVG than you'll be using in CSS. For example if you import 16x16px SVG icons to IcoMoon and then use 8px font-size on them, they'll render poorly. Instead import 8x8px SVG icons and they'll render the same in both Chrome and Safari.

When I'm saying rendering I'm refering to vertical alignment of icon fonts.

Live example: http://jsfiddle.net/QQ7mV/3/

HTML:

<a href="" class="button increase">+</a>

CSS:

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}
@font-face {
    font-family: "icons";
    src: url("http://cl.ly/QnNX/icons.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
a {
    display: block;
    text-decoration: none;
    outline: none;
}
.button {
    width: 115px;
    height: 37px;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    margin: 0 auto 20px auto;
    background-color: #edeef0;
    background-repeat: no-repeat;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    transition-property: background-color, opacity;
    -webkit-transition-property: background-color, opacity;
    -moz-transition-property: background-color, opacity;
    -o-transition-property: background-color, opacity;
    -ms-transition-property: background-color, opacity;
    transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}
.button.increase, .button.decrease {
    display: inline-block;
    vertical-align: top;
    width: 23px;
    height: 23px;
    font-family: "icons";
    font-size: 8px;
    font-weight: normal;
    line-height: 1;
    padding: 7px 0 0 0;
    -webkit-font-smoothing: antialiased;
}
.button.increase {
    margin: 13px 5px 0 11px;
}
.button.decrease {
    margin: 13px 0 0 0;
}

---

Related Topics