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

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>