Font line height problem on website - Degular font

[Lorenzo244902407u2w]

Hi everyone, on my website I am using an adobe font called degular. During the mockup phase I didn't have any problem, the font was perfect. Now, during the development phase the web designer I am working with is having problems with the "line-height": as you can see from the image, the loop of the letter "g" is cut off.

The same thing happens with all the descenders and all the tails of the letters "q, p, g, j, y".
The problem occurs when a negative line-height is used, which is not normal, since with other fonts this problem does not occur.
How can I solve it?

[Tarun Saini]

Hi @Lorenzo244902407u2w,

Welcome to the community! We're sorry to hear about this. Could you please share the Web URL with us so we can look into this?

Regards,

Tarun

[Lorenzo244902407u2w]

Sure, the URL is https://dev.midable.net/

[Tarun Saini]

Hi @Lorenzo244902407u2w,

Thanks for sharing the URL. I would like to inform you that the issue you're seeing is due to the combination of the metrics in this font family and the line height value you're using. This article has a comprehensive discussion of font metrics and line-height values: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

Let us know how it goes.

Regards,

Tarun

[Lorenzo244902407u2w]

Thank you for your answer @Tarun Saini , I will try to submit your answer to the web designer tomorrow.
However, there is one thing that is not clear to me: why on other similar fonts this thing does not happen? If I wanted to, through line-height, I should be able to stick the lines together. The text would be hard to read, but the letters would not be cut off.
I have a background as a web designer and studied to be a graphic designer and ui/ux designer, and I have to say that it seems to me that the font is not designed correctly and has this line-height flaw