Google Webfonts handle differently in Firefox, Chrome and Opera

Question

I am having a problem with Google websites.

I am using Google Webfont called "Bitter". But in Firefox and Chrome, this is done in different ways. Chrome and Opera seem to do this in a similar way. Its not much different, but its spoiling formatting and paragraphing.

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 question I'm talking about: http://i49.tinypic.com/2u46mpi.png

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

thanks

Answer 1

Fonts will never display the same in all browsers. They use different rendering mechanisms - trying to make sites look the same in every browser is a lost reason.

For your specific problem, use inextricable space to prevent contact from us.

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

Answer 2

Firefox seems to make the weight a little different, and the distance is a little different. You might also try defining a numerical value to override any browser defaults. Unfortunately, different browsers and especially the OS love to render fonts differently and with their own rules.

Answer 3

There may be differences in the rendering of fonts between browsers, although most often there are differences between platforms.

However, here the difference is apparently caused by the spacing between the letters. More precisely, Firefox correctly applies it, WebKit browsers do not. For a font size of 16px -0.06em should get a little more than one pixel, and if you use the check mode (F12, computed style), you will see that Firefox uses -1px , while Chrome uses normal (i.e., zero) for letter-spacing . Chrome seems to have some threshold on the letter spacing value; making it simple -0.065em changes things.

Therefore, especially if you prefer Chrome rendering, just omit letter-spacing . As a rule, it is better to avoid marking up letters - the font designer should know better, and if you agree with her or his choice, use a different font instead of trying to “fix” the font.

One of the differences between browsers is that Firefox uses kerning by default, other browsers do not. But this does not apply to the specific texts in the example, since the kitter table for Bitter has only a pair of uppercase letters (for example, “VA” will look different).

Answer 4

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

Answer 5

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

This solved my problem on this topic.