[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.

あわせて読みたい

Theming – Material UI Customize Material UI with your theme. You can change the colors, the typography and much more.

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 />
    </ThemeProvider>
  )
}

Summary

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