How to set font-family as Opensans SemiboldItalic font

i want to change my font-family of a <span> tag into Opensans SemiboldItalic font. but i dont know how?

#footer .container span { font-family: 'Open Sans Semibold';
}

3 Answers

You have to use font-weight and font-style.

font-family: 'Open Sans', Arial, sans-serif;
font-weight: 600;
font-style: italic;

Make sure you are calling the semi-bold italic font weight (600) as well:

<link href='// rel='stylesheet' type='text/css'>

Unless you're alright with getting faux italic (ie: letting the browser italicize the font rather than displaying the italic font) you must make sure you're pulling in the semi-bold italic font:

<link href=' rel='stylesheet' type='text/css'>

If you want more varieties from that family, you must specify them as well. For instance, if you want 400 normal and italic and 600 normal and italic, the link would be:

<link href=' rel='stylesheet' type='text/css'>

That resolves to these styles:

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url() format('woff2');
}
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url() format('woff2');
}
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: local('Open Sans Italic'), local('OpenSans-Italic'), url() format('woff2');
}
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url() format('woff2');
}

If you are using Google Fonts, you got a little tutorial on the usage on the right:

font-family: 'Open Sans', sans-serif;

To change the Font-Weight you can take a look on the table above. The number for Semi-Bold is 600, so:

font-weight: 600;

Easy as that.

Edit: Forgot the Italic-Style:

font-style: italic;