【Next.js】MUIの要素にGoogleFontsを適用する方法（備忘録）

MUI要素にGoogleFontsを適用する方法

GoogleFontsでフォントを選ぶ

Google Fonts

でFontを選ぶ。

globals.cssにimportする

globals.cssにfontをimportする。

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

MUI要素に適用

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

system-ui

が含まれていない場合は、通常sx={{ fontFamily:'Days One' }}のように設定する。