- This topic is empty.
June 14, 2011 at 1:32 pm #29607
Okay, so I’ve been Googling this for ages and I’ve read about all the usual problems, but this is not any of them.
It’s not the problem with light fonts on dark backgrounds appearing bolder. It’s not a problem with declaring font-weight, and it’s not about rendering differences.
I’m using the Colaborate font from fontsquirrel: http://www.fontsquirrel.com/fonts/Colaborate
Previewing the font on fontsquirrel.com using a Mac with Safari, it renders correctly, thin is thin, light is light etc. Once I put it on my own website it turns it bold. Ridiculously bold, as in there’s no doubt something is very wrong (since it works correctly on fontsquirrel).
On a PC there are no problems, everything works fine.
I have tried font-weight properties & the text-shadow fix, neither does anything. It remains bold. Yes, it’s light text on dark background. I have stripped my entire CSS file of font-weight properties, still nothing. I have tried other fonts, the same problems apply.
Does anyone have any idea about what I’m doing wrong? Is it something obvious?June 14, 2011 at 2:01 pm #79767
Have you tried this:
-webkit-font-smoothing: antialiased;June 14, 2011 at 3:26 pm #75283
That did the trick! Thanks so much :)
I wonder why googling the issue didn’t come up with that result. Is this a common issue? Since I’m usually coding on a PC I’ve never really ran into this before (my client happened to be on a macbook and commented on how bold the font appeared to her).June 14, 2011 at 3:39 pm #74308TheDocMember
Nice one – I didn’t know about that either!June 14, 2011 at 3:41 pm #74309
Where is this property supposed to go Christopher? When you declare it using the font-face or within the declaration of the font family, etc?June 14, 2011 at 3:43 pm #75941
You’re quite welcome. I do believe it is a common issue on some fonts, not sure about all.
@OniLinkCr: That should work.June 14, 2011 at 3:47 pm #75942
Within the font-family then? :pJune 14, 2011 at 3:52 pm #75938
I don’t believe it has a specific place to go. If you have a web font and are declaring it using @font-face then, I would certainly use it there. Why add it multiple times in your CSS?June 14, 2011 at 4:51 pm #73028
I simply declared it on my body, underneath font-family. It solved all kinds of issues with different fonts. Weirds me out that it works fine in webkit on a PC without smoothing: antialiased;, but not on a mac.June 15, 2011 at 3:06 pm #72936
Perfect, that’s what I wanted to know, where it should go on the body declaration, or the actual font-face property.July 4, 2011 at 4:17 pm #82823baazookaParticipant
it works perfectly for Safari but not for Firefox…
even with -moz-font-smoothing…
does anyone knows what to do?July 4, 2011 at 7:01 pm #82829
That’s because it is for webkit browsers hence the prefix.
- The forum ‘CSS’ is closed to new topics and replies.