Tff font distorting on android devices but not ios


I’m using a custom tff font in my app and it seems to destort the text on androids but not ios.
Here is the ios outcome:

And here is the android outcome:

As you can see the bottom of the text is cut out in the second photo.

here is the tff font code:

@font-face {
    font-family: "Nunito-med";
    src: url("../assets/fonts/Nunito-Medium.ttf") format("ttf");

and here is the css code:

.popover-type-button {
    color: black;
    font-family: "Nunito-med";
    text-align: center;

Placing padding or margins on the bottom of the text dont work.

please help.
Thank you