title: @font-face problem with font-weight in Safari
body: <p>I just started using @font-face
  This is on top of my css</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>and i have this below for a menu on joomla</p>
  
  <pre><code>#menu_bottom ul li a {
  font-size:12px;
  font-weight:600;
  letter-spacing:-0.6px;
  text-transform:uppercase;
  </code></pre>
  
  <p>this is on the html file</p>
  
  <pre><code>&lt;li class="item23"&gt;&lt;a href="/index.php?option=com_user&amp;amp;view=login&amp;amp;Itemid=13&amp;amp;lang=en"&gt;&lt;span&gt;Menu Item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Is there something wrong with my font-face declaration on top of my css file?</p>
  
  <p>should i try adding something like this</p>
  
  <pre><code>@font-face {
    font-family: Avenir;
    src: url(../fonts/AvenirLTStd-Heavy.otf);
    font-style: bold;
  }
  </code></pre>
  
  <p>I tried but didnt work.
  Should i add another font this are that i have on my font directory</p>
  
  <pre><code>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
  </code></pre>
  
  <p>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.</p>