Google Fonts like Overpass not correctly rendered

[70nyIT]

• 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 😯

If I import Overpass from Google fonts, and set it as default font with createMuiTheme, text is rendered with an incorrect space below the text.

Expected Behavior 🤔

To work like Roboto, so for example in a button seeing the text aligned in the center.

Steps to Reproduce 🕹

I have created a codesandbox for this issue, that you can find here
https://codesandbox.io/s/unruffled-vaughan-zvwq9

Also a Stackoverflow quesiton to grab some inputs (so far no helps)
https://stackoverflow.com/questions/68190709/issue-with-font-rendering-on-browser

As you can see from the images, text is not aligned in the center, as it should be. There is no padding and line-height is correctly set. It's just the font that has extra space below.

Steps:

1. Import font in index.html

<link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />

2. put it in createMuiTheme

export const theme = createMuiTheme({
    typography: {
      fontFamily: [
        'Overpass',
        '"Helvetica Neue"',
        'Arial',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
      ].join(','),
      ... 
    }
  })

3. Render a button, or two elements in a row flex box, and you will see that the align-items: center property doesn't align items in the center.

See https://codesandbox.io/s/unruffled-vaughan-zvwq9 for the error

Context 🔦

I cannot use common used fonts, such as Overpass or Benne

Your Environment 🌎

Issue first seen on Brave Browser ( Version 1.26.67 Chromium: 91.0.4472.114 (Official Build) (64-bit) ) but also reproduced on Chrome (latest), and Firefox (latest)

`npx @material-ui/envinfo`

  npx: installed 2 in 5.659s

  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
  Binaries:
    Node: 14.17.1 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 6.14.13 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 89.0.2
  npmPackages:
    @material-ui/core: ^4.11.4 => 4.11.4 
    @material-ui/icons: ^4.11.2 => 4.11.2 
    @material-ui/styles:  4.11.4 
    @material-ui/system:  4.11.3 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react: ^17.0.0 => 17.0.9 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^5.3.0 => 5.3.0 
    typescript: ^4.1.2 => 4.3.2 ```
</details>

[eps1lon]

Thanks for the feedback.

This sounds like an issue with the font not Material-UI. Could you create a repro that compares Material-UI with a normal <button /> that's using the font?

[70nyIT]

Hi @eps1lon

What I did was trying to import Overpass from a different source than Google Fonts (see code here)
https://codesandbox.io/s/nervous-sanderson-villz

And it works. So appears to be a bug with the font files on Google Fonts. Pretty absurd, but looks like this.

[eps1lon]

And it works. So appears to be a bug with the font files on Google Fonts. Pretty absurd, but looks like this.

Thanks for the confirmation. Since this isn't actionable for us, I'm closing.

[70nyIT]

More info for who's interested: that's an issue of the Overpass font. If you clone their repo, fix is there. Not sure why they're not re-building the release, even if lots of people are asking for it ( RedHatOfficial/Overpass#75 ). I think google fonts is just getting the latest release and not the actual files in the repo.