Search code examples
htmlcssbrowserrenderingwebfonts

Webfont rendering issue: browsers seem to be confused about size and position

I am using two webfonts in a project. One of them has a rendering issue I have never encountered before. The other one works as expected.

Generally, the problem seems to be that the browser has a hard time determining the size and position of the text.

In Safari, I notice:

  • When selecting text, the selection box renders higher than the text is rendered.
  • When clicking a link, I have to click higher than the actual text.

In Chrome, I notice:

  • When selecting text, the selection box renders way larger than the text is rendered.
  • When clicking a link, I have to click higher than the actual text.

In Firefox, the issue is the least noticeable. There is no obvious shift in position. The overlay for the text seems a little small / shifted down, though.

Does anybody have any clue as to what is happening here? Why only for this particular font?

Trying to select the first line in Safari Selecting the first–not the third–line in Safari

enter image description here Selecting the first line in Chrome

enter image description here Selecting the first line in Firefox

Solution

  • I found the answer to my own question by contacting the creators of the problematic font. So in case anyone stumbles on this question later...

    The odd behavior is caused by a few special characters that extend way beyond the usual bounderies. While I never use these characters, most browsers today seem to determine the line height based on the largest character in the font, not the largest character used.