[MUI]Changing font family of all Material UI components

If you want to change the font-family of all MUI components, use createTheme.


About createTheme

You can customise the MUI to suit your theme. You can create your own MUI, including colours, typography, theming variables, etc.

Set font-family on all components of the MUI.

Specify the font-family to be used for all components in the typography property of createTheme.
The font-family is set when the theme defined in ThemeProvider for the createTheme.

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

function MainApp(props: Props) {
  const { Component, pageProps, uniqueHistoryTagItems } = props

  const theme = createTheme({
    typography: {
      fontFamily: ['Yu Gothic', 'Roboto', 'sans-serif'].join(',')

  return (
    <ThemeProvider theme={theme}>
      <Component />


Defining a ThemeProvider allows you to manage the overall settings of the MUI.
It is Convenience.