フォントファイルをnpm経由で導入し、Webpackで扱うのが初めてだったのでどハマりしました……。
公式ウェブサイトのインストールの項目
npmでinstallしてimport '@fontsource/roboto/300.css';したら終わりのような書き方ですが、そこは世界水準のマニュアル、案の定説明不足で、初心者には無理です。 9割がた、真下に書いてあるCDN使ってlinkタグ埋め込む方法に流れるかと。
1. css-loaderとstyle-loaderを導入する。
公式の記述を見て、「あれ、cssファイルimportするということは、css-loaderとかいるのでは。なんも書いてないけど……」と思ったそこの貴方、正解です。Material UIを使うということはstyled-components or emotionのどちらかを導入しているかと思うので、css-loaderとか入れてないかと思いますが入れましょう。
npm i -D css-loader style-loader
webpack.config.jsの設定はごく普通に、
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', "css-loader"],
},
],
},
こんな感じでOKです。
2. フォントファイルをwebpack上で扱うために設定を追加 or (webpack v4以下)file-loaderを導入する
フォントファイルをwebpackで扱うためwebpack.config.jsに設定が必要です。まずはフォントファイルを扱う用の設定を行います。
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},//←これを追加
{
test: /\.css$/i,
use: ['style-loader', "css-loader"],
},
],
},
またv4以下はfile-loaderの導入が必要です。設定はググったら出てくると思うのでそちらに任せます。
3. ビルドする
この状態でビルドすると、importしたCSSファイル内で読み込まれているフォントファイルのみが抽出されて、出力先フォルダに大量にフォントファイルが生成されればOKです。
4. Gitの設定をする（必要な場合のみ）
ファイルが生成されたので一旦Gitにコミットしたくなるかもしれませんが、Gitの設定によってはせっかく出力したフォントファイルが壊れます。 プレビュー時に開発者ツールのコンソール欄にファイルが壊れているとかなんとか、それらしきエラーメッセージが出たらこれを疑ってください。
Gitの改行コードの変換設定を入れている場合、バイナリファイルであるフォントファイルの中の改行コードまで変換をかけてしまうのが原因となります。対策としては.gitattributesを作成し、
# Webフォントをバイナリとして認識させないと、フォントファイル内の改行コードを変換してしまい壊れる
*.otf binary
*.eot binary
*.svg binary
*.ttf binary
*.woff binary
と設定することで回避することができます。
5. 確認する
主に開発者ツールの使い方的な話になります。ビルド自体が上手くいかない場合は……頑張ってください💪
読み込んだフォントが適用されているか確認する
開発者ツールの要素(element)タブを開き、Webフォントの適用されているDOM要素を選択してください。次にサブの計算済み(確か英語だとcomputedだったような……)タブの一番下にレンダリングフォントの項目があるので、そこで実際に適用されているフォントを確認することができます。僕の時はここがずっとArialになってて苦戦しました……
（適用されていない場合）フォントファイルが読み込まれているか確認する
フォントファイルの読み込み過程も開発者ツールのネットワークタブで見れるのでまずは確認してください。そもそも読み込まれてない場合はloader周りに問題があり、読み込んでるけどエラーが出ている場合はおそらく出力しているパスと読み込もうとしているパスがズレてるので、読み込もうとしているファイルパスを確認し、webpack.config.jsと格闘してみてください。フォルダ構成によっては、ここも中々ハマりポイントですね……。
（ダメ元）キャッシュや生成したフォントファイルを削除する
自分はファイルパスの問題で読み込まれず、ビルド設定変更しながら何度もビルドしていたんですが、キャッシュ消しても変更した設定が反映されず、一旦出力した全フォントファイルを削除して再生成したら反映されたケースがあったので、ダメ元で試すのもありかと思います。