material-ui: global font family in theme is not working

import { createTheme,ThemeProvider } from "@mui/material/styles", you might be importing it from “@mui/styles”, in that case you will get these issues. @MutableLoss

Scratch that. I got mine working with this:

createTheme({
  components: {
    MuiTypography: {
      defaultProps: {
        fontFamily: font,
      },
    },
  },
});

I’d like to chime in on this as I’ve also faced the same issue after the recent migration.

To provide more context, prior to v5 you could set the font family just once when creating the theme and it would be used globally:

const theme = createTheme({
  typography: {
    fontFamily: 'Montserrat'
  }
  // buttons, links and other components with text would automatically use the global font family
}) 

In v5 however, you have to explicitly set it for every component that has text:

...
  components: {
    MuiTypography: {
      defaultProps: {
        fontFamily: "Montserrat"
      }
    },
    MuiButton: {
      styleOverrides: {
        contained: { 
          fontFamily: "Montserrat"
        },
        // same for other variants
      }
    }
  },
  // same for other components such as MuiLink and its variants
...

I’m not sure if I’m just missing crucial documentation somewhere that would allow me to set a global font more efficiently, but certainly right now it seems like there is a lot more boilerplate compared to the prior version of material-ui.

I also haven’t seen this change mentioned on the migration docs, so I’m not sure whether this change in behavior was intended or not.

Importing from @mui/material/styles was causing this for me.

You should import createTheme, ThemeProvider from @mui/material

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

EDIT:

I realized this cropped up in my Storybook Decorator again after forgetting a specific webpack extended config needed to make Storybook’s version of Emotion aligned with MUI’s. So if you are still Perplexed as to why your theme provider is not working, see this issue/solution:

https://github.com/mui-org/material-ui/issues/24282#issuecomment-976581700

I am also struggling to change typography.fontFamily via the theme. I’ve tried the example from @Brlaney above - no luck. I can see the changed fontFamily in the theme object, but it’s not being applied to the components. I’m using these versions:

    "@mui/icons-material": "^5.0.1",
    "@mui/material": "^5.0.1",
    "@mui/styled-engine-sc": "^5.0.0",

It doesn’t look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-next), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

I have been running into the issue where the typography object isn’t being applied to styles, but it only happens within Gatsby when using the gatsby-theme-material-ui. This may not be the issue for anyone else, but it’s a bit peculiar that only the typography portion of the theme is causing issues. Anyways, thought I would at least mention.

Unfortunately defaultProps applies to all typography components, which makes styling other variants quite annoying. I ended up using variants and custom variants to get around this issue:

components: {
  MuiTypography: {
    variants: [
      {
          props: { variant: "test" },
          style: {
            color: grey[200],
            fontSize: 80,
            fontWeight: 800
          }
        },
        {
          props: { variant: "body1" },
          style: {
            fontSize: 24
          }
        }
      }
    ]
  }

Then in the component:

  <Typography variant="test">This is the test</Typography>
  <Typography variant="h2">And the H2</Typography>

Here’s my CodeSandbox example: https://codesandbox.io/s/react-mui-v5-template-h8oee?file=/src/theme.js

I’ve provided what worked for me below. You could possibly look into your global css styles too, but I don’t think this a Material-Ui issue but something you need to reconfigure in your code.

My custom Mui theme.ts file:

import {
  createTheme,
  responsiveFontSizes
} from '@mui/material/styles';

const font = "'Rubik', sans-serif";

let theme = createTheme({
  palette: {
    primary: { main: '#1d2031' },
    secondary: { main: '#dc0250' },
    error: { main: '#6E353A' },
    warning: { main: '#F5EE9E' },
    info: { main: '#568BFF' },
    success: { main: '#00B389' },
    background: { default: '#FDFFFC' }
  },
  breakpoints: {
    values: { xs: 600, sm: 800, md: 1000, lg: 1200, xl: 1536, }
  },
  typography: {
    fontFamily: font,
    h1: { fontSize: 69 },
    h2: { fontSize: 57 },
    h3: { fontSize: 48 },
    h4: { fontSize: 40 },
    h5: { fontSize: 33 },
    h6: { fontSize: 28 },
    subtitle1: { fontSize: 23 },
    subtitle2: { fontSize: 19 },
    body1: { fontSize: 19 },
    body2: { fontSize: 16 }
  }
});

theme = responsiveFontSizes(theme);

export default theme;