Inconsistent glyph height in font rendering in Firefox and Chrome

I noticed that on some web pages the font character vertical positions are inconsistent.

This is an example from with their custom font ‘SpiegelSerifUI’. In this case the lowercase ‘s’ character is going beneath the baseline; almost as if it was a descender character (like ‘g’).

  • Firefox:

  • Chrome:

A more severe case is the rendering of the ‘P052’ font on For this example, I only have a screenshot from Firefox because Chrome uses the ‘Caladea’ font for reasons unknown to me. As you can see from the word ‘mechanism’, the x-height of the characters ‘m’ and ‘n’ differs from the others. In LibreOffice, however, the same font looks just fine.

  • Firefox (P052 font):

Do you have the same issue on the mentioned websites? What can I do to fix this issue?