CODEWITHSUNDEEP
cssfontssafari
Pav Sidhu
Pav Sidhu

Reputation: 6944

Safari weird font bug when using font-weight

From the images below, you can see that the font rendering used by safari adds some white lines to some characters. This occurs in Safari for both iOS and Mac. While in the example below it is not as noticeable, in practice it can be quite distracting.

Full text Close up

I noticed this happened after I added font-weight: 400; to my text. The reason I added it was to fix another issue by Safari which rendered by font with large kerning between letters see this Stack Overlow question.

This is the entire CSS for the text:

h2 {
  font-family: 'My-Font', sans-serif;
  font-size: 3.5em;
  line-height: 1.2em;
  margin-bottom: 0.5em;
  text-align: center;
}

Is this another bug in Safari and is there a workaround if so? Thanks.

Upvotes: 1

Views: 1772

Answers (1)

Arsen Chudinov
Arsen Chudinov

Reputation: 21

Some folks recommend

text-rendering: optimizeLegibility;

Other

transform: perspective(1px);

Hope it helps.

Upvotes: 1

Related Questions