CODEWITHSUNDEEP
csshtml
user3355028
user3355028

Reputation: 177

Using bold and italic tags with google fonts

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>

Upvotes: 7

Views: 11028

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

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>

Upvotes: 5

Giacomo Paita
Giacomo Paita

Reputation: 1419

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.

Upvotes: 1

Related Questions