CODEWITHSUNDEEP
css
heykatieben
heykatieben

Reputation: 279

Italic is rendering in bold?

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/

Upvotes: 3

Views: 1957

Answers (1)

sinisake
sinisake

Reputation: 11318

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.

Upvotes: 4

Related Questions