Geek Answers Handbook

Why some Google fonts do not display in italics correctly

I am having a weird problem with some google fonts.

For example, I use the Muli font, and in some browsers the text appears in italics when the CSS rule is:

p { font-style: normal; }

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

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

Why only some browsers display these fonts in italics? What should I look for in tracking this issue?

+7
source share
1 answer

Speculatory! If you are testing on two different computers, with the same browser and browser version, your font difference is probably coming from the OS. With the Googles API, when calling Firefox or Chrome, the local attribute is used, invoking the OS version of this font, if available. In which the font called or provided by the OS may be an italic version instead of the regular one.

My suggestion is to download the font and manually import yourself without using the local attribute.

When importing the Google Fonts API, the following happens:

A query 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

+3
source

More articles:


All Articles