CODEWITHSUNDEEP
cssfonts
LookingForHelp7
LookingForHelp7

Reputation:

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

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:

http://i.imgur.com/mywDZ.png

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

http://i.imgur.com/aL0vi.jpg

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.

Upvotes: 4

Views: 7010

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

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.

Upvotes: 2

Jules
Jules

Reputation: 14520

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.

Upvotes: 0

Mohamed Anis Dahmani
Mohamed Anis Dahmani

Reputation: 433

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

Upvotes: 4

Related Questions