Multiple custom fonts, one does not work

I have multiple sources added with css on a page, but one of them (Monserrat Bold) is not reflected as you can see in the images

It should be seen at the top of the image but it appears

here the css code that I have

@font-face{
font-family: 'Monserrat';
  src: url('/Resources/Fonts/Montserrat/Montserrat-Regular.otf');
  src: url('Resources/Fonts/Montserrat/._Montserrat-Black.otf');

}
@font-face{
  font-family: 'MonserratBold' ;
  src: url('Resources/Fonts/Montserrat/Montserrat-Bold.otf');
}
@font-face{
  font-family: 'MonserratMed';
  src: url('Resources/Fonts/Montserrat/Montserrat-Medium.otf');

}

Do you know what the error may be? Because if you take the font family of Monsserrat and MonserratMed