Font-face web fonts looks bolder

I'm stuck with a problem. I'm trying to embed fonts with @font-face but they always looks bolder. I have tried everything: other fonts, change font-weight to "ligher" or "100" etc... The font looks always as it is bolded. I'm pretty sure it could look good bec开发者_如何学Goause I've seen it used in many other websites with @font-face and it looks thin and fine.

See the attached image link text (I know it would never look as in PS, but so different?)

thanks

---

Set the following in your stylesheet on whatever elements you are using font face on and it fixes the issue:

-webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */

---

You are probably using the wrong weight file. Fonts will often be sold in different weights. You should verify that the file you're embedding with @font-face is the right weight.

---

The way the font looks on photoshop is obviously a graphical version of the font, specially, when photoshop has 5 types of blurring for fonts: none, sharp, crisp, strong and smooth. Those beside the original fonts, which they commonly are in one TTF and have the versions inside or, varios fonts for the different weights and faces.

Maybe if you enlighten us about the font type, the weight, blurring and whatever is useful for reproducing purposes would be useful to help you...

---

Fonts vary according to OS (Linux, Mac,PC) and even by browser, never mind the Photoshop blurring variants that Billeeb mentioned. For example Safari on windows applies some heavy anti-aliasing to make text smooth, which makes it look blaringly different on Firefox, even on the same machine.

In my opinion, the best way to have a consistent font experience is to use some sort of font replacement technology like Cufon. But this only works for not standard fonts with simple effects, you wouldn't want to use this if you need crazy amounts of drop shadow or blurring. For that its best to stick with images

---

This could even happen if you are using <h1> tag. h tags makes the font looks bolder.