How to change font face

So what I’m trying to do is add new type of font to my website, but the problem, I’m getting stuck, I need to add from Open Sans 4 types of text:

bold, regular, bolditalic, italic

Previously I already added other fonts but, It was always one from different families. This is my code:

@font-face { font-family: 'Josefin'; src: url("font/Josefin.ttf"); }
@font-face { font-family: 'Roboto'; src: url("font/Roboto.ttf"); }
@font-face { font-family: 'OpenSans'; src: url("font/OpenSans-Regular.ttf"); }
@font-face { font-family: 'OpenSans'; src: url("font/OpenSans-Bold.ttf"); }
@font-face { font-family: 'OpenSans'; src: url("font/OpenSans-BoldItalic.ttf"); }
@font-face { font-family: 'OpenSans'; src: url("font/OpenSans-Italic.ttf"); }   

h1, h2, h3, h4, h5, .bold{ font-family: 'Josefin'; }
p, li, ul, ol, a, .light{ font-family: 'Roboto'; }

the h tags I was trying to change them to the “OpenSans-Italic” but I don’t know how to call the specific font.

Read more here: How to change font face

Leave a Reply

Your email address will not be published. Required fields are marked *