Global fonts not being applied on custom variants

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/dreamy-frog-pybrk2?file=/src/App.js

Steps:

1. Setup a custom fontFamily on typography when creating theme.
2. Create a new variant on typography without fontFamily since it should already use the one specified above.
3. Check the typography of rendered variant.

Current behavior 😯

Here is a small sample of my custom theme:

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  typography: {
    fontFamily: "Times New Roman",

    custom: {
      textDecoration: "underline",
      color: "#FF0008"
    }
  }
});


export default theme;

If I try to use the custom variant it will not use the Times New Roman font-family. Adding allVariants also doesn't work.

Expected behavior 🤔

Every custom variants that I add should also use the fontFamily I specified in the typography theme.

Context 🔦

Setting a global font-family... I found a related ticket #28633 and nothing seems to work, except to manually add the fontFamily on each new variant that you create.... The ticket is labeled as need more info so I made a new one with a codesandbox in it...

Thank you....

Your environment 🌎

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Start with the linked CodeSandbox and reproduce the custom typography variant using the provided theme configuration. Compare the rendered custom variant with the expected global font family behavior, then add a regression test wherever typography variant behavior is covered. Done means custom variants inherit the configured font family without requiring it on each variant.