'CSS: new font breaking layout by aligning text to the top

I've been working with Open Sans in a project for a while and we then decided to use a new font, and after adding the new font the layout breaks everywhere and the text appears to be aligned to the top. Here are some screenshots for a simple text in an icon:

Open Sans New Font enter image description here

On the left is Open Sans, on the right is the new font. The inspect box of the new font is shown in the 3rd image.

Which css property should I change make the new font globally in the middle again?

EDIT: Here's another more visible Example with the inspect tool:

enter image description here enter image description here

The new font is on the right. Open Sans is on the left. There are no paddings or margins inside the element, it's just a span.

new font: https://fonts.adobe.com/fonts/azo-sans

htmlcssbootstrap-4


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions