How can I correctly import and use more than one font in CSS?

Question

I'm importing 2 fonts in my CSS stylesheet but when I apply them, It only applies the second font(Roboto-Regular)

This is my stylesheet

@font-face {
  font-family:'Tangerine-Bold';
  src: url('fonts/Tangerine-Bold.ttf');
  font-family:'Roboto-Regular';
  src: url('fonts/Roboto-Regular.ttf');
}

h1{
  font-family:'Tangerine-Bold';
}

h2{
  font-family:'Roboto-Regular';
}

So, for h1 It also applies Roboto-Regular and not Tangerine-Bold as I want.

Answer 1

Try writing each of them like this:

@font-face{
    font-family:'Tangerine-Bold';
    font-weight: bold;
    src: local('Tangerine-Bold'), url('fonts/Tangerine-Bold.ttf') format('truetype');
}
@font-face{
    font-family:'Roboto-Regular';
    font-weight: normal;
    src: local('Roboto-Regular'), url('fonts/Roboto-Regular.ttf') format('truetype');    
}