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

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.

Answer 2

The -webkit solutions won't work for the strong issue for many google fonts, custom fonts and fonts that don't have preset values.

The problem is that you need to specify the value of bold in the strong tags.

This can be done by two ways:

You can either include from Google Fonts or wherever your font is from in your header; it needs both the regular font and the bold font each should have a different font-weight number like 400 regular and 600 bold for example:

<link href="https://fonts.xxx.com/css?family=XXX:400,600" rel="stylesheet">

Or use the aboves source code and paste into your own css like below:

@font-face {
  font-family: 'XXX';
  font-style: normal;
  font-weight: 600;
  src: local('XXX SemiBold'), local('XXX-SemiBold'), 
  url...
}

Use whatever your font is instead of XXX.

Then also in strong {font-weight:600;}

Answer 3

Use -webkit-font-smoothing: antialiased;

The text-shadow trick doesn't work anymore.

Answer 4

None of the answers here worked for me. Possibly because I am using the windows version of Safari for testing. I had to include the bold font in my CSS to fix the problem. In the case of the original question he would need to add the following (notice it uses the same font-family name)

@font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-bold-webfont.eot');
src: url('myfonts/lekton-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('myfonts/lekton-bold-webfont.woff') format('woff'),
     url(myfonts/lekton-bold-webfont.ttf)  format('truetype'),
     url('myfonts/lekton-bold-webfont.svg#LektonRegular') format('svg');
font-weight: bold;
font-style: normal;
}

This worked in all browsers for me.

Answer 5

I found a solution for this particular issue. Actually any of above solutions dint work for me. So started checking the default webkit styles added by safari and found that -webkit-text-stroke-width was applied to body having value 0.5px. I set it to 0!important and solved the issue for me.