はじめに
普段は Google fonts を利用してフォントを変更していますが、いざインターネット上でダウンロードしたカスタムファイル(.ttf)を利用しようと思った時にどのように適用すれば良いかわからず、少し迷ったので備忘録として残しておきます。
やること
やることは二つだけで
- フォントファイルをプロジェクトの
public配下に置く -
src/assetsに置いたフォントファイルをCSSファイルで読み込む
以上です。
やり方
ダウンロードしたフォントファイル(.ttf, .ttc, .woff, .woff2など)をsrc直下のsrc/assets/fontsディレクトリに置きます。
置いたらindex.cssで@font-faceを設定します。
@font-face {
font-family: 'CutomFont';
src: url('./assets/fonts/customFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
ここまで行えたらあとは,google fonts の適用と手順は一緒でfont-familyを設定するだけです。
body {
font-family: CustomFont, system-ui, sans-serif;
}
以上で適用できます。
付録
ここから先は自分がフォントの設定を行う上で疑問を持ったところについて記述していきます。
フォントファイルって結局どこに置くのが正解なの?
publicとsrc/assetsのどちらに置くのがベストプラクティスなのかわからなかったので調べました。
viteのドキュメントによると、以下の条件に該当する場合はpublicフォルダの使用を推奨しているようです。
- ソースコード内で参照されたことがない
- ハッシュ処理を行わず、ファイル名を完全に同一に保持しなければならない
publicディレクトリにおいたファイルはビルド時に解析などが行われずにそのままdistディレクトリのルートにコピーされます。そのため、プログラム側で管理する必要のない、完全に独立した静的ファイルを管理するのに向いています。
一方でsrc/assetsにファイルを置いた場合は挙動が異なり、
- インポートによる依存関係の解決
- アセット最適化・ハッシュ化
- エラー検知
が行われます。
JSやCSSファイルから参照がされると、viteのassets graphに組み込まれるためインポートによる依存関係の解決が行われます。また、ファイル名にハッシュの付与が行われ、コンテンツの更新を行なった時に古いキャッシュが邪魔をすることがなくなります。これに加えて、ファイルが見つからない場合、ビルド時にエラーを出すため安全性が上がります。
以上の情報よりCSSから呼び出すフォントファイルはsrc/assetsで管理するのが良さそうです。
font-faceのfont-displayって何?
ブラウザに新しいフォントを学習させ、Webサイトで使えるようにする設定が @font-face です。
通常、ブラウザはフォントのダウンロードが完了するまで「どう表示して待つか」を判断する必要があります。この挙動をコントロールするのが font-display プロパティです。
フォントが表示されるまでの「3つの時間」
ブラウザがフォントを読み込む際、内部では以下の3つのフェーズを切り替えています。
- フォントブロック時間: 指定したフォントがまだないなら、文字を透明にして表示を隠し、読み込みを待つ時間
- フォントスワップ時間: 指定したフォントがないなら、一旦代わりの標準フォントで表示して待つ時間
- フォント失敗時間: 「もう読み込みは間に合わない」と判断し、標準フォントで確定させるタイミング
font-display で表示ルールを決めています。