@font-face проблема с насыщенностью шрифта в Safari

Я только что начал использовать @font-face, Это сверху моей 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;
}

и у меня есть это ниже для меню на joomla

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

это находится на файле HTML

<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>

Это работает в Firefox, но он не работает правильно над Safari или Chrome, шрифт является правильным, но насыщенность шрифта не работает, я проверил инструмент разработчика Google Chrome, и вычисленная толщина шрифта 600. Я попытался использовать 100 или 900, результатами на сафари и хроме является то же, изменение привычки толщины шрифта.

Есть ли что-то не так с моим объявлением поверхности шрифта сверху моего файла CSS?

если я пытаюсь добавить что-то вроде этого

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

Я попробовал, но не работал. Если я добавляю другой шрифт, это - то, что я имею на своем каталоге шрифта

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

Или если я пробую другой формат шрифтов, что-то, что не является otf, в IE, кажется, работает, хотя ширина больше. Я все еще должен зафиксировать это.