[Next.js] How to Apply Google Fonts to MUI Elements (Memo)

How to Apply Google Fonts to MUI Elements

Choose a Font from Google Fonts

Go to Google Fonts and select a font.

Import in globals.css

Import the selected font in globals.css.

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

Apply to MUI Elements

<Typography sx={{ fontFamily: '"Press Start 2P", system-ui' }}>
  Text
</Typography>

If system-ui is not included, it is usually written like this:

sx={{ fontFamily: 'Days One' }}