How to deal with extra whitespace that comes with custom fonts?

Question

I am using custom font-face in my web app and as demonstrated by image bellow it comes with this extra whitespace underneath it which makes alignment a bit tricky in elements like buttons for example.

I tried playing with different line heights, but it didn't change it. I believe space below it is needed for some ligatures of this typeface which is fine. But can I add extra space above as well to sort of match it all and make alignment easier? Preferably with css.

Answer 1

You can use line-height property in css to either reduce the height vertically.

similarly, you can use padding-top to add space on top of the text