Change MUI Font Size & Family for All Components (Full Tutorial!)

Material UI has an effective way to set font size for all components. It also has quick ways for setting font size for components of the same type, and for individual components.

I will show one example of each method. We will customize font size in the TextField, Container, and Typography as seen below:

Full code can be found in the Resources section.

Change Material UI Font Size with Theme Typography

The MUI default theme includes a font size that gets applied to all components. This is found under theme.typography.fontSize.

I created a custom theme so that I could change the font size:

const CustomFontTheme = createTheme({
  typography: {
    fontSize: 30
  }
});

Changing the theme typography font size did not require much code. However, the custom theme needs to be imported and passed to components using ThemeProvider:

export default function FontSizeTypography() {
  return (
    <>
      <ThemeProvider theme={CustomFontTheme}>
        <TextField defaultValue="Test TextField Text: 30px"></TextField>
      </ThemeProvider>

    </>
  );
}

Any components that are wrapped with ThemeProvider where theme={CustomFontTheme} will now have a default font size of 30. In this case, the TextField will now have the larger font. The TextField component didn’t need any configuration to implement this larger font.

One interesting feature of updating theme.typography.fontSize is that it only accepts a number value, so we can’t pass rems (a string value). However, the 30 value is getting translated to rems in the DOM:

Change Material UI Font Size with Theme Override

A more targeted approach to theme font size can change default font size for all instances of a component type.

I changed all Container components to have font size of 24px. Here’s the code from CustomFontTheme:

const CustomFontTheme = createTheme({
  components: {
    MuiContainer: {
      styleOverrides: {
        root: {
          fontSize: 24
        }
      }
    }
  }
});

Notice the deep syntax here: components.MuiContainer.styleOverrides.root.fontSize. This uses Theme Overrides to change all instances of Container.

And here’s a Container that inherits this font size:

<ThemeProvider theme={CustomFontTheme}>

  <Container>Test Container Text: 24px</Container>
</ThemeProvider>

The Container does nothing to implement this font size. It simply inherits font size of 24px because it is wrapped with CustomFontTheme.

The override of font size renders in the DOM as 24px unlike theme.typography.fontSize which render in rems.

Change Material UI Font Size with Typography Component

If we only want to change a single component instance’s font size, we don’t want to use theme. Instead, we can either change the component directly using sx={{fontSize: 18}} or pass a Typography component with a custom font size like below:

<Box>
  <Typography noWrap sx={{ fontSize: 18 }}>Test Typography Text: 18px</Typography>
</Box>

The advantage of passing a Typography component is that it comes with additional styling. Also, adding the noWrap prop renders the component with ellipses if the text is too long. We can see that styling in the DOM here:

Change MUI Font Family with Theme Typography

On my browser, these are the default font families loaded for my MUI components:

"Roboto","Helvetica","Arial",sans-serif;

However, the MUI default theme includes a fontFamily property that can be customized just like we changed fontSize. Here’s the code to customize MUI fontFamily for all components using a theme:

const CustomFontTheme = createTheme({
  typography: {

    fontFamily: ["Courier New, monospace", "Brush Script MT, Brush Script Std, cursive"].join(",")
  }
});

Any components that have access to the theme provider with our CustomFontTheme will now have the “Courier New, monospace” font. If that fails to load, then components will attempt to use the “Brush Script MT, Brush Script Std, cursive” font.

Here’s what our TextField looks like now with a custom font family:

Resources

Full Code:

//FontSizeTypography.tsx
import { Box, Container, Typography, TextField } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import { CustomFontTheme } from "./CustomFontTheme";

export default function FontSizeTypography() {
  return (
    <>
      <ThemeProvider theme={CustomFontTheme}>
        <TextField defaultValue="Test TextField Text: 30px"></TextField>
        <Container>Test Container Text: 24px</Container>
      </ThemeProvider>
      <Box>
        <Typography noWrap sx={{ fontSize: 18 }}>Test Typography Text: 18px</Typography>
      </Box>
    </>
  );
}

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

const CustomFontTheme = createTheme({
  typography: {
    fontSize: 30
  },
  components: {
    MuiContainer: {
      styleOverrides: {
        root: {
          fontSize: 24
        }
      }
    }
  }
});

export { CustomFontTheme };

MUI Theme Docs