Next.jsでフォント導入する時に困ったこと

とあるプロジェクトを進めていたときに...

フォントがデフォルトだと味気なかったためgoogle fontsからフォントを導入しようとした。
検索結果などから_document.tsを作ればいいことがわかった。
それを元に作ってみたところ

フォントが適用されない

原因はMaterialUI

プロジェクトにおいて文字列を使用する要素の多くにMaterialUIのTypographyコンポーネントを使用していた
どうやらMaterialUIのTypographyコンポーネントでフォントを利用するにはそれ用の設定が必要であった。
試しにTypographyを使わずに文字列を試すとフォントが適用されていた。
結果として_document.tsに問題はなかった

解決策:createTheme

MaterialUIにはcreateThemeというプロジェクト内で適用される色やスタイルをカスタムできる関数が用意されている
それを用いてthemeを定義すればよかった

const theme = createTheme({
        typography: {
            fontFamily: '"Yusei Magic"',
        },
    });

スタイルの適用法などは公式ドキュメントを参考
https://mui.com/material-ui/customization/typography/

_document.tsの参考記事
https://qiita.com/dosukoi_man/items/4624de0275a53ba648d3