Using bold and italic tags with google fonts

Question

I'm trying to use and italic with google fonts and it's not working at all. I included this line on my HTML.

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

For example, when I use the code below, all the texts look "normal" without bold and italic as expected. Any suggestions?

Thanks.

<p>this is a <b>bold</b> text and this is <i>italic</i> text</p>

Answer 1

Use the font according to its instructions (unless you understand well how the font works and can knowingly deviate from the instructions). In the interface, select Normal (selected by default), Normal Italic, and Bold, if you want just normal, italic, and bold (but not italic bold). Google then tells you what link element to use. And it works:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700' 
  rel='stylesheet' type='text/css'>
<style>
p { font-family: Open Sans }
</style>
<p>this is a <b>bold</b> text and this is <i>italic</i> text</p>

Answer 2

Use the 700 font declaration:

@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 700;
   src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'),   
   url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-honF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
 }

or, as in your example:

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

and then:

.yourClass {font-family: 'Open Sans'; font-weight: 700;}

The same way for the italic, as it is claims when you define your CSS font-type, and in the guide.