Link with `component=button` does not use custom font

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When adding a custom font all components work well (like Typography Link and Button) But when using <Link component="button">Hi</Link> it uses default font

Expected behavior 🤔

Link should always use the custom font

Steps to reproduce 🕹

https://codesandbox.io/s/vigorous-chihiro-mf2h6k?file=/src/Demo.tsx

Context 🔦

No response

Your environment 🌎

No response

[jhon-rayo]

I will work on this and put up a PR if that’s fine

[oliviertassinari]

However, there is a broader question (not directly surfaced in this issue that Michal raised), we say variant: “inherit”, but it doesn’t truly inherit:

export default function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="body1">
        <CssBaseline />

        <Link>This is good (it's Inconsolata)</Link>
        <br />
        <Link component="button">This is not good (it's Ariel)</Link>
      </Typography>
    </ThemeProvider>
  );
}

https://codesandbox.io/s/xenodochial-stitch-wpjcqk?file=/src/Demo.tsx

We could fix this 👍