Italic is rendering in bold?

Question

Today, font-style:italic in css is rendering my fonts in bold, only on Chrome and Firefox - not on Safari.

For instance, using this css:

em {
 font-style: italic;
}

and this HTML:

<p><em>Hi, I'm showing up in bold.</em></p>

displays in italics AND bold.

I've tried restoring CSS from two days ago before I noticed the bug, to no effect, so it seems like it's something other than the CSS causing this. I've tried validating the HTML and CSS, nothing shows up that seems to be the source.

An example of this shows on this page: https://critter.co/home/orgs/

Answer 1

Actual link/code: https://fonts.googleapis.com/css?family=Open+Sans:800italic,400

on your page...

You have just font-weight:800, for italic.

Change it with:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800italic,400italic,300,300italic,600,600italic,700,700italic,800' rel='stylesheet' type='text/css'>

so you have all possible variations... P.S. Specify then font-weight in CSS, and rendering can be more consistent, in all browsers.