Link with component=button does not use custom font

[israelKusayev]

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/distracted-wind-jjxdxm?file=/src/Demo.tsx

import { Link, createTheme, CssBaseline, ThemeProvider } from "@mui/material";

const theme = createTheme({
  typography: {
    fontFamily: "Inconsolata, Arial"
  }
});

export default function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Link>This is good (it's Inconsolata)</Link>
      <br />
      <Link component="button">This is not good (it's Ariel)</Link>
    </ThemeProvider>
  );
}

Context 🔦

No response

Your environment 🌎

Material UI v5.11.0

[michaldudak]

The problem here is that the Link component does not explicitly set its font-family but inherits the one from the parent element. This way it uses the same style as the surrounding text and can be placed in headers, paragraphs, etc. without any changes.
When you supply a button to the component prop, this style inheritance is broken, as, by default, buttons have a font-family set by the browser.
You can work around this issue by setting a style that will make the button's font properties inherit from its parent, such as:

.MuiLink-button {
  font-family: inherit;
}

I'm not keen on setting this in the library at this point, as this can cause an unexpected change of fonts in many applications.

[oliviertassinari]

From my perspective, it's a support question. We document this here: https://mui.com/material-ui/react-link/

It was designed so the correct approach is:

<Link component="button" variant="body1">This is not good (it's Ariel)</Link>

https://codesandbox.io/s/elegant-cray-zv1x60?file=/src/Demo.tsx

[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 👍

[michaldudak]

I'm happy to accept a PR for this issue.

[oyar99]

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

[clairefields15]

Any movement on this one? Seems to still be an issue