Search code examples
cssfirefoxsafarifont-face

@font-face problem with font-weight in Safari

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

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