How to use italic google fonts?

Question

So I'm trying to use an italic version of the Google font Roboto.

This is the bit of code Google gave me for the fonts I chose...

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Roboto:300,100italic' rel='stylesheet' type='text/css'>

I can get it to apply Roboto Slab and Roboto but I'm not sure how to get it to use Roboto Italic.

I can do...

font-style: italic;

But you can do that with any font and get a faux italic. I want the real italic Google font.

Anyone know how to use Italic Google fonts correctly?

Answer 1

The correct way to apply italic font styles with google fonts is to use

font-style: italic;

for a bold font weight use

font-weight: bold;

The problem you're running into is that you're not including the appropriate font-weight for the italic font.

If you want font-weight: normal; font-style: italic to work, you need to include the 400, and 400italic versions:

http://fonts.googleapis.com/css?family=Roboto:400,400italic

The reason font-style: italic will work is because the font-declarations are set up to specify their appropriate style and weight. If you look at a the source for the link above, you'll find:

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: ...sources...
}

Having the font-weight and font-style declared allows the font to take over at the specified weight and style. This can be used to reverse font-styles in situations such as where you might want a blockquote to appear italicized and emphasized text to appear normal.

If no overriding font-file is specified for the style and weight, then the browser will do its best to render a faux italic or faux bold.