0

I am using one custom font. When I use font-weight: bold it is getting more bold in Safari web browser, but everything works fine in all other web browsers.

I have tried the following, but none of them worked.

-webkit-font-smoothing: antialiased;

and

text-shadow: #000000 0 0 0px;
karel
  • 5,489
  • 46
  • 45
  • 50
Naju
  • 1,541
  • 7
  • 27
  • 59
  • 1
    What font are you using? Is it by chance a custom font? – feddus Dec 12 '13 at 11:32
  • 1
    @feddus He did state "custom font" in the question :) – xec Dec 12 '13 at 11:36
  • @feddus I am using custom fonts that are generated by fontsquirrel.com. Thank u. – Naju Dec 12 '13 at 11:37
  • Oh, I missed that. I was going to mention what ExtPro commented below. Maybe this thread can help you out: http://stackoverflow.com/questions/9450706/safari-font-weight-issue-text-too-bold – feddus Dec 12 '13 at 11:41

1 Answers1

2

If you're using a custom font this is likely happening because the font set doesn't proved a bold weight, which means your browser must synthesize it- this creates discrepancies between browser outputs.

This kind of behaviour can also be replicated if you try to use Tahoma or Lucida Grande with e.g. font-style:italic:, which neither font is supplied with.

If you're using Google webfonts (or other) you may want to check a bold version of the font is provided.

See this answer on SO for additional information such a the use of text-rendering: optimizeLegibility;

Community
  • 1
  • 1
SW4
  • 69,876
  • 20
  • 132
  • 137