CODEWITHSUNDEEP
cssfont-face
Andycap
Andycap

Reputation: 525

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 because 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

Upvotes: 1

Views: 2977

Answers (5)

Deke
Deke

Reputation: 4659

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

Upvotes: 0

Yuri
Yuri

Reputation: 111

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. */

Upvotes: 11

russjman
russjman

Reputation: 506

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

Upvotes: 0

Billeeb
Billeeb

Reputation: 216

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

Upvotes: 0

sholsinger
sholsinger

Reputation: 3088

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.

Upvotes: 1

Related Questions