【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' }}