12

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.

Improve this question

3 Answers 3

Reset to default
13

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I had a similar issue and this solved my problem. Thx Knu. @Juan, please accept this answer, so that this question can be closed.
Thanks, this worked perfectly! Only thing that puzzles me is that the source references an issue in Chrome's bug tracker, and it's marked as fixed... but still had the problem in 2012.
@Knu The OP mentioned Safari and Chrome, and the answer links to a bug in Safari and Chrome... which didn't surprise me since both browsers use WebKit as a layout engine.
Heads up! Mapping a bold font file to a normal (400) weight in your @font-face rule while applying a bolder weight in element style rules will cause synthesised boldness (aka "faux bold"). In 2010, browsers were still in their infancy in terms of font support (woff was established ~2011) and certainly had a lot of quirks.
3

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.

Improve this answer

2 Comments

I did try using bold, it didnt work either, it has something to do with font-face. The idea of font-face is to use custom fonts, and those are provided from my server, i do have have the helvetica font as secondary.
Different browsers interpret the values differently – admittedly 2010 was still in the dark ages of webfonts ... internet explorer was still relevant (for the wrong reasons). Nowadays (and for many years) you should definitely prefer numeric font-weight values to keyword based ones at least when it comes extended ones like "semibold" or "light". While specifying fallback fonts is still a good idea – the custom font loading doesn't rely on local fonts.
1

Better late than never. Hope this helps:

html { -webkit-font-smoothing: antialiased; }
Improve this answer

1 Comment

This would only have an effect in Apple OS (and maybe some Linux webkit-based browsers like epiphany/web)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.