All geek questions in one place

Use bold and italic tags with google fonts

I'm trying to use italics with Google fonts and it doesn't work at all. I have included this line in 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 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>
+5
source share
2 answers

Use the font in accordance with its instructions (if you do not understand how the font works and may deliberately deviate from the instructions). In the interface, select Normal (default), Normal Italic and Bold if you want only normal, italic and bold (but not italic). Google then tells you which link element to use. And it works:

 <link href='http://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>
+3
source

Use font declaration 700:

 @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;}

In the same way as in italics, because it determines the type of CSS font , and in.

+1
source

Source: https://habr.com/ru/post/1208813/

More articles:


All Articles