@font-face problem with font-weight in Safari

Question

I just started using @font-face This is on top of my css

@font-face {
  font-family: Avenir;
  src: url(../fonts/AvenirLTStd-Medium.otf);
}
body{
 font-family:"Avenir",Helvetica;
 background:#fff url(../images/main_bg.png) repeat-x scroll 0 0;
 color:#321244;
}

and i have this below for a menu on joomla

#menu_bottom ul li a {
font-size:12px;
font-weight:600;
letter-spacing:-0.6px;
text-transform:uppercase;

this is on the html file

<li class="item23"><a href="/index.php?option=com_user&amp;view=login&amp;Itemid=13&amp;lang=en"><span>Menu Item</span></a></li>

This works in Firefox, but it is not working correctly on Safari or Chrome, the font is correct but the font-weight is not working, i checked on google-chrome developer tool and the computed font weight is 600. I have tried using 100 or 900 the results on safari and chrome are the same, the font weight wont change.

Is there something wrong with my font-face declaration on top of my css file?

should i try adding something like this

@font-face {
  font-family: Avenir;
  src: url(../fonts/AvenirLTStd-Heavy.otf);
  font-style: bold;
}

I tried but didnt work. Should i add another font this are that i have on my font directory

AJensonPro-BoldIt.otf         AvenirLTStd-BookOblique.otf
AJensonPro-Bold.otf           AvenirLTStd-Book.otf
AJensonPro-It.otf             AvenirLTStd-HeavyOblique.otf
AJensonPro-LtIt.otf           AvenirLTStd-Heavy.otf
AJensonPro-Lt.otf             AvenirLTStd-LightOblique.otf
AJensonPro-Regular.otf        AvenirLTStd-Light.otf
AJensonPro-SemiboldIt.otf     AvenirLTStd-MediumOblique.otf
AJensonPro-Semibold.otf       AvenirLTStd-Medium.otf
AvenirLTStd-BlackOblique.otf  AvenirLTStd-Oblique.otf
AvenirLTStd-Black.otf         AvenirLTStd-Roman.otf

Or should i try another font format, something that is not otf, in IE seems to be working althought the width is bigger. I still need to fix that.

Solution 1

As explained here, you have to add

font-weight: normal;
font-style: normal;

inside the @font-face declaration and then use the font-weight:600; on your anchor.

Solution 2

Specifying a numerical value for font-weight is something you do at your peril. Different browsers interpret the values differently, and some don't interpret it as anything at all. You are best going with the standard "bold" ... which browsers get closest to matching in some semi-uniform way. Also, if you are using custom typefaces you should be certain your users have them on their systems. Also, some custom fonts don't respond well to the faux "bold" property. They will have a named "bold" face, like Avenir Bold, Avenir Black, Avenir Demibold, Avenir Demibold Condensed, etc., etc., etc.

Also, always include enough fallback fonts, including, at last, the "serif" or "sans-serif" or "monospace" general font specifier.