Tff font distorting on android devices but not ios

Ionic Framework ionic-v3
1

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:

image1
image1.jpg750×1334 145 KB

And here is the android outcome:

Screenshot_20171121-142646
Screenshot_20171121-142646.jpg1080×2220 270 KB

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