How to make two identical fonts with different weights work in IE10?

Question

HTML

There is such a layout . But we are talking about a specific problem with the font. There is a contact list at the end of the page:

And it looks fine in all browsers except IE. I don't know how it is in older versions, but there is a problem even in IE10. Here is the problem:

So, there are connected fonts:

@font-face {
  font-family: "BebasNeueBold";
  src: url("fonts/BebasNeueBold.otf"), 
     url("fonts/BebasNeueBold.ttf");
}
@font-face {
  font-family: "BebasNeueBook";
  src: url("fonts/BebasNeueBook.otf"),
     url("fonts/BebasNeueBook.ttf");
}

They are also connected to the left and right parts of this line with a contact. That is, one font is bold, the other is light.

.contact-name {
  font-family: "BebasNeueBold";
  font-size:24px;
}
.contact-content {
  font-family: "BebasNeueBook";
  font-size:24px;
}

I don't know, I already searched for errors, I didn't find anything. If you put instead of this font, let's say Roboto, a font that is connected by a link to Google Fonts, then everything will be displayed normally. But this particular font is not displayed. Maybe the fact is that there is already a bold BebasNeue and it is connected, and the second BebasNeue does not work, although it has a different thickness?

Answer 1

The issue has been discussed a thousand times already.
IE < 9 needs a font in eot format, IE 9+ - woff.
Connect all the necessary formats.

@font-face {
  font-family: 'room';
  src: url('../fonts/room_bold-webfont.eot');
  src: url('../fonts/room_bold-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/room_bold-webfont.woff2') format('woff2'),
  url('../fonts/room_bold-webfont.woff') format('woff'),
  url('../fonts/room_bold-webfont.ttf') format('truetype'),
  url('../fonts/room_bold-webfont.svg#roombold') format('svg');
  font-weight: 600;
  font-style: normal;
}

You can convert here or here
+ weight for the same font , indicated not through different font-family, but through the font-weight specified in the font description.
Example:

@font-face {
  font-family: 'room';
  src: url('../fonts/room-webfont.eot');
  /*остальные форматы*/
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'room';
  src: url('../fonts/room_bold-webfont.eot');
  /*остальные форматы*/
  font-weight: 600;
  font-style: normal;
}

Now, by specifying the font-family for the entire block you need, you can only operate on saturation by specifying font-weight.