Customizing the theme in nextjs: responsiveFontSizes, fontFamily and allVariants don't work with custom Typography variants

[Susannah-Parsons]

Steps to reproduce

Link to live example: (required)

Steps:

1. Run the program from the mui-theme-bug respository
2. Check the styles for the body3 typography
3. Note that the styles don't include the fontFamily nor the styles from allVariants
4. Note that none of the typography variants have responsive fonts

Current behavior

Custom typography variants don't include the fontFamily nor the styles in allVariants. None of the typography variants have responsiveFontStyles

Expected behavior

All the typography variants should use the fontFamily and allVariants properties. All the typography variants should have responsive font sizes.

Context

Custom typography variants that work properly with the fontFamily, allVariants and responsiveFontStyles features of custom theming in MUI

Your environment

npx @mui/envinfo

``` System: OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish) Binaries: Node: 20.17.0 - /usr/bin/node npm: 10.8.2 - /usr/bin/npm pnpm: Not Found Browsers: Chrome: Not Found npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/core-downloads-tracker: 6.1.6 @mui/material: ^6.1.6 => 6.1.6 @mui/private-theming: 6.1.6 @mui/styled-engine: 6.1.6 @mui/system: 6.1.6 @mui/types: 7.2.19 @mui/utils: 6.1.6 @types/react: ^18 => 18.3.12 react: 19.0.0-rc-66855b96-20241106 => 19.0.0-rc-66855b96-20241106 react-dom: 19.0.0-rc-66855b96-20241106 => 19.0.0-rc-66855b96-20241106 typescript: ^5 => 5.6.3 I used Microsoft Edge Version 130.0.2849.68 (Official build) (64-bit) to view the app ```

Search keywords: responsiveFontSizes fontFamily, allVariants, custom, typography, theme

[siriwatknp]

Thanks for reporting, I think it's a docs issue.

allVariants only affect the default variants but not the custom variants.

You can do this:

const allVariants = {
  color: "black",
  fontStyle: "normal",
  fontWeight: "normal"
};
const myTypography = {
    fontFamily: ["Noto Sans", "sans-serif"].join(),
    allVariants,
    body1: {
      fontSize: "1rem",
      lineHeight: "1.7"
    },
    body2: {
      fontSize: "0.875rem",
      lineHeight: "1.7"
    },
    body3: {
      fontSize: "0.75rem",
      lineHeight: "1.7",
      …allVariants, // custom variants will not inherit properties from `allVariants` by default
    }
}