Google Webfonts are rendering differently in Firefox, Chrome and Opera

Question

I am having some problem with Google webfonts.

I am using Google Webfont called ‘Bitter’. But in Firefox and Chrome it is being rendered differently. Chrome and Opera seem to render it in similar way. It’s not drastically different but it’s messing up the formatting and compositions of the paragraphs.

Here is the CSS:

.small-col h3{

color: #606060;
font-family: 'Bitter', Georgia, "Times New Roman", Times, serif;
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
letter-spacing: -0.06em;

}

And here is a screenshot of the issue I am talking about: http://i49.tinypic.com/2u46mpi.png

Could anyone suggest how I can get consistent rendering in both Firefox, Chrome and Opera?

Thanks

Pansophy

Gave up trying to get fonts to behave in a consistent cross-browser way a long time ago, they use different rendering engines, they do it differently. – Keese

Chrome's font rendering is garbage, always has been always will be. There really isn't anything you can do about it other than find a font you can live with in all the browsers. I would imagine Safari looks the same as the second 2 as well since it's webkit too. – Podophyllin

Answer 1

Fonts are never going to render the same across all browsers. They use different rendering engines—trying to get websites to look identical on every browser is a lost cause.

For your specific problem, use a non-breaking space to prevent contact and us from being separated.

<p> ... contact&nbsp;us </p>

Hypertension

Answer 2

It looks like firefox is rendering the weight a little different, and the spacing a little differently too. Maybe try defining those numerically, as well, to override any browser defaults. Unfortunately, different browsers and especially OSs like to render fonts differently and by their own rules at times.

Limp

Thanks Patrick. I tried defining the spacing by both pixel and 'em' but the problem persists. What are the other spacing option you are talking about? – Pansophy

Try setting letter-spacing: 0 specifically. – Willamina

You are already using letter-spacing (you could try defining it in px or points instead of em for more exact control) and then font-weight (you can user definitions like 'bold' 'normal' et al, or numerically '100' '200' '300' and so on.) If you do a quick google search for css font styling you should find some better information that is more complete. Grain of salt, even defining every little bit, each browser still can (and likely will) render differently. – Limp

Tried using ' letter-spacing: 0px; font-style: normal; font-weight: 400; text-transform: none; text-decoration: none;' Does not seem to work :( – Pansophy

Answer 3

There can be differences in font rendering between browsers, though more often, differences exist between platforms.

However, here the difference seems to be caused by letter spacing. More exactly, Firefox correctly applies it, WebKit browsers don’t. For 16px font size, -0.06em should result in a little over one pixel, and if you use the inspection mode (F12, computed style), you will see that Firefox applies -1px whereas Chrome uses normal (i.e., zero) for letter-spacing. Chrome seems to have some threshold on the letter spacing value; making it just -0.065em changes things.

So especially if you prefer the Chrome rendering, just omit the letter-spacing. It is generally best to avoid letter spacing – the font designer should know better, and if you agree with her or his choices, use another font, instead of of trying to “fix” the font.

One of the differences between browsers is that Firefox applies kerning by default, other browsers don’t. But this is not relevant to the specific texts in the example, since the kerning table for Bitter has pairs of uppercase letters only (so “VA” would look different, for example).

Nippers

Thanks Jukka for your explanation. If I use px instead of em is it going to be better? I cant seems to any difference if I use pixel instead of em. Is there any downside of using px instead of em for letter spacing? – Pansophy

If you use letter-spacing: -1px, then Chrome seems to honor it. This is odd. And it makes the padding fixed, so it does not get adjusted, if e.g. the user forces a different font size. But why would you set letter spacing at all, if you prefer the current Chrome rendering, which lacks it? – Nippers

Answer 4

I had the same problem with the serif font. If you write "serif" instead of serif (without ""), Chrome will render the same as Firefox.

Zoochemistry

I can confirm: This worked for me with other browsers too. Thanks @Greg ! – Butane

Answer 5

Try adding the google webfonts code to the head of your website by using the provided javascript code, instead of css or @import.

This solved my problem on this topic.

Epicycloid