Why do some Google Fonts displayed incorrectly in Italic style

Question

I'm experiecing a weird issue with some Google Fonts.

For example, I'm using the Muli font and in some browsers the text is displayed in italic style when the CSS rule is:

p {
    font-style: normal;
}

I've also opened the Google Web Fonts website with several browsers (I tested with 16 different browsers on 6 different PCs and Macs) and only with two of them I experienced the problem (one on a Chrome browser and another one on a Firefox browser).

This screenshot shows a side-by-side comparison of the font displayed in Firefox and a browser that shows the font in italic style

Why would only some browsers display these fonts as italic? What should I look for in tracking down this issue?

Answer 1

Speculatory! If you are testing on 2 different computers, with the same browser and browser version, your difference in fonts is probably coming from the OS. With Googles API when a call to Firefox or Chrome is made the local attribute is used, calling the OS's version of that font if it is available. In which the font being called or given by the OS could be an italic version instead of a normal.

My suggestion would be to download the font and manually import yourself, without using the local attribute.

When you import the Google font API the follows happens:

A request for Inconsolata from Firefox, for example, returns the following CSS:

@font-face {
  font-family: 'Inconsolata';
  src: local('Inconsolata'), url('http://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}

A request from Internet Explorer, on the other hand, returns:

@font-face {
  font-family: 'Inconsolata';
  src: url('http://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
} 

https://developers.google.com/webfonts/docs/technical_considerations