How do I get font to display properly in all browsers?

Question

I have the following in the CSS file for my website:

body {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.125em;
line-height: 1.5em;
}

In Safari on my Mac the site has the font looking the way I want it:

However, on Windows computers in IE and Chrome the font does not look like the above, see:

My question is, how do I get the font to look the same in all the browsers on all OS such that looks like screenshot #1 above?

Thanks in advance for your help.

score 5 · Answer 1 · answered Oct 28 '12 at 01:53

5

This is a matter of foont smoothing and that is different from a browser to another, they don't "read" fonts the same way.

Here is an article that explains the process, Font smoothing explained.

and here is a CSS hack you can try in order to get the same result everywhere:

html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

Further reading: 4.2 Font smoothing: the 'font-smooth' property in the CSS 3 fonts module specs from the W3C

answered Oct 28 '12 at 01:53

Mohamed Anis Dahmani

433
3
12

The W3C document linked to is an outdated draft from year 2002. The current draft http://www.w3.org/TR/css3-fonts/ has nothing about font smoothing. – Jukka K. Korpela Oct 28 '12 at 06:35
The CSS hack apparently works only in WebKit browsers on Mac, and according to what I last read, the `antialiased` value is not supported at present. In any case, the hack does not help at all with rendering on Windows. – Jukka K. Korpela Oct 28 '12 at 06:38

score 2 · Answer 2 · answered Oct 28 '12 at 06:47

There is nothing you can do about it, though you may test the variation for the font(s) you use and possibly reconsider your font choices. Some fonts are affected more than others by the differences.

On different platforms and, to some extent, in different browsers, fonts are rendered differently. See e.g. A Closer Look At Font Rendering.

The rendering may also depend on system and/or browser settings. What I see on Windows, when testing your style sheet on normal text, is very different from your screen shot.

score 0 · Answer 3 · answered Oct 28 '12 at 04:43

Windows is renowned for its poor font smoothing; the one sure-fire, cross-browser alternative is replacing your entire content with a .png image (as .jpg tend to be terrible with text). Naturally, this isn't a viable alternative, so until all browsers support the font-smoothing property (as demonstrated above), you're stuck in the current situation.

How do I get font to display properly in all browsers?

3 Answers3

Linked