Font rendering inconsistencies in browser

I am currently working with a custom font and I am having rendering issues across mobile devices. After some research, it seems as though it may be a baseline problem with the font itself.

Here is the code, the first button is the custom font and the second is arial:

<div>
        ITC Franklin Gothic Demi Compressed-> 
        <button style="padding:0 !important; margin: 0 !important;">start</button>
        <button style="padding:0 !important; margin: 0 !important; font-family: arial;">start</button> 
        <- arial
</div>

I removed all padding and margins, which renders as expected on chrome - desktop.

Chrome - Desktop

But not on Chrome on my Android phone.

Chrome - Mobile (Desktop)

As you can see, there is some padding on the custom font on a mobile device.

What could be the problem?

As a last resort, I could style them differently with CSS media queries. My concern with this approach is devices with higher resolutions which may trigger the desktop styles and revert back to the original issue.

Any help with this would be greatly appreciated.