Safari font-weight issue , text too bold

Question

When I apply a font-weight:bold style, the look of the font is too bold in Safari when compared to other browsers. I tried below css as suggested in some site but its still the same.

text-shadow: #000000 0 0 0px; 

Screenshots of text rendering:

Chrome

Safari

Here's my css declaration:

p {  margin: 8px 5px 0 15px;  color:#D8D2CE;  font-size:11pt;   letter-spacing:-1px;  font-weight: bold;   font-family: LektonRegular;   }  @font-face { font-family: 'LektonRegular'; src: url('myfonts/lekton-regular-webfont.eot'); src: url('myfonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'),      url('myfonts/lekton-regular-webfont.woff') format('woff'),      url(myfonts/lekton-regular-webfont.ttf)  format('truetype'),      url('myfonts/lekton-regular-webfont.svg#LektonRegular') format('svg'); font-weight: normal; font-style: normal;  } 

How can this be fixed?

Answer 1

Use -webkit-font-smoothing: antialiased;

The text-shadow trick doesn't work anymore.

Answer 2

For rendering bold text consistently across browsers, your font should explicitly contain bold characters. Otherwise, browsers probably try to make bold variants of characters based on their normal variants, and results are inconsistent across browsers since they likely have different algorithms for such conversion.

Also note that text rendering may be different on different platforms on system level (e.g. Windows, Mac OS). Such differences are OK and do not typically need to be fixed.

See also topic about -webkit-font-smoothing property.