[Button] Vertical text alignement issue on Firefox

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Buttons do not render properly with correct padding. As you can see, the text looks raised and is higher than it should be. While this seems like a small issue, it is noticeable when using rounded buttons and is an issue in production.

No amount of `button::-moz-focus-inner` or any other found solution does the trick.

Expected Behavior 🤔

Button should render with text centered.

Steps to Reproduce 🕹

Steps:

1. Import and create button
2. Open button on Chrome and Firefox
3. See that padding is different

Context 🔦

This is an issue, mostly, for buttons that have rounded edges. It’s fairly noticeable and frustrating, especially since we can’t get it to stop doing this. Can you possibly add Firefox support for this so it stops happening automatically?

Your Environment 🌎

Tech	Version
Material-UI	v4.9.9
React	v16.13.1
Browser	Firefox

[lcdss]

@lcdss Do you have a codesandbox? Is it related to a custom font?

This only happens on Firefox (as far as I have tested) and I’m not using a custom font. Problably this is related to #19584.

https://github.com/mui-org/material-ui/issues/19584#issuecomment-582852051

[mkarajohn]

This is definitely an inconsistency with some fonts @jasminnancy , especially prevalent when icons are in there as well

Firefox on Linux

Chromium on Linux

This is actually a pretty old “issue” which has to do with the fact that FF is implementing font metrics accorrding to spec, while the Chromium browsers are not.

See

• https://stackoverflow.com/questions/26830461/text-vertical-alignment-within-button-on-firefox-and-chrome-when-using-helveti
• https://github.com/whatwg/html/issues/2470
• https://github.com/RedHatOfficial/Overpass/issues/56#issuecomment-408533165

Could this be fixed on the font level @oliviertassinari ? There are some fonts that work the same on both browsers, but Roboto ain’t one of them. Turns out I had not actually loaded the Roboto font 😅 The Ubuntu font for example looks the same on both browsers

Chromium on Linux

Firefox on Linux