Webフォントの読み込み方法＆Webサイト軽量化について解説します
Webフォントは、ウェブサイトのデザインや可読性を向上させるために広く利用されています。
しかし、特に日本語フォントのようにファイルサイズが大きい場合、適切な読み込み方法を選択し、最適化を行わないと、ページの読み込み速度に影響をしてしまう可能性があります。
この記事では、Webフォントの主な読み込み方法をいくつか解説し、大きなフォントファイル、例えばNoto Sans JPの容量削減方法についてもご紹介します。
フォントファイルのダウンロードと配置について
Webフォントの活用において、もっとも一般的な方法のひとつが、フォントファイルをダウンロードしてプロジェクトに配置するやり方です。
ローカルにフォントを設置する方法、やサブセット化して軽量化する方法など、あらゆる読み込み方法の基本となるステップのため手順を紹介します。
手順 1：フォントの取得
フォント配布サイト（Google Fontsなど）から必要なフォントをダウンロードします。
手順 2：プロジェクト内に配置
Webフォントの読み込み方法
Webフォントの読み込み方法は、大きく以下の3つに分けられます。
- 1. CSSの@importを使用する方法
- 2. CDN方式
- 3. サブセット化して軽量化する方法
それぞれの方法について、解説していきます。
1. CSS経由での読み込み (@import)
CSSファイル内で@importを使う方法は、外部フォントを手軽に読み込めるため、特に初心者にとって導入がしやすい手法です。
ただし、この方法はフォントの読み込みが完了するまでに時間がかかることがあり、読み込み中に一時的にデフォルトフォントでテキストが表示される「FOUT（Flash of Unstyled Text）」が発生することがあります。
FOUTが発生すると、視覚的なチラつきでユーザー体験が損なわれる可能性があります。それでも手軽に利用できる点は大きなメリットであり、Google Fontsなどを使えばすぐに導入可能です。
CSSファイル内で@importはこのように記述します。
例えば、Google FontsからNoto Sans JPを読み込む場合、以下のようになります。
display=swapは、フォントが読み込まれるまでテキストを非表示にしないオプションです。これを使うことで、読み込み中の空白表示を防げます。
この方法は、CSSファイル内で完結するため、スタイルシートの管理がしやすくなります。
2. CDNから読み込み
CDN（Content Delivery Network）とは、画像やフォントなどのファイルをインターネット経由で、世界中の複数のサーバーから効率的に配信する仕組みのことです。
Google FontsのようなWebフォントをCDN経由で読み込む方法は、導入が簡単でパフォーマンスにも優れていることから、多くのWebサイトで活用されています。
CDNを利用することで、表示速度の向上やキャッシュによる再利用の効果が期待でき、ページの読み込みがスムーズになります。
さらに、フォントファイルの管理や設置の必要がなくなり、更新や運用の手間が大幅に軽減されるのも魅力的です。
初心者はもちろん、頻繁に更新が発生するWebサイトにも最適な方法と言えるでしょう。
こちらはGoogle Fontsを例として手順を紹介します。
①利用したいフォントを見つけ、コードをコピー
まずは利用したいフォントを見つけて選択します。
該当フォントのページに移動したら、「Get font」→「Get embed code」の順にクリックします。
該当フォントのページに移動したら、「Get font」→「Get embed code」の順にクリックします。
すると、読み込み用コードをコピーできるページへ遷移します。
<link>にチェックが入っていることを確認できたら、「Embed code in the <head> of your html」に表示されているコードをコピーします。
②HTMLの<head>タグ内に記述
先ほどコピーしたコードを<head>タグに記述するとこの通りになります。
③CSSで適用する
最後に適用したい箇所にCSSで指定するとフォントが適用されます。
3. サブセット化で読み込み
日本語フォントは、多数の文字を含むため、ファイルサイズが大きくなりがちです。例えば、Noto Sans JPのフォントファイルは、1つあたり4MB以上になることもあります。
これをそのまま使用すると、ページの読み込み速度に影響を及ぼす可能性があります。
この問題を解決するのは、サブセット化という手法です。
サブセット化とは、フォントファイルから使用する文字だけを抜き出し、ファイルサイズを削減する方法です。
基本は以下の手順でサブセット化を行います。
①フォントファイルのダウンロード
フォント配布サイト（Google Fontsなど）から必要なフォントをダウンロードします。
②サブセット化ツール（サブセットフォントメーカーなど）で必要な文字だけを抽出。
・サブセット化ツール：サブセットフォントメーカー
まずは公式サイトからツールをダウンロードしインストールしてください。
ツールの詳しい解説を割愛しますが、以下のように簡単にサブセット化できます。
③WOFFやWOFF2形式に変換してassetsに配置。
サブセット化したフォントファイルは、通常 TTF（TrueType Font）形式で出力されますが、Webでの使用には WOFF（Web Open Font Format） 形式への変換が推奨されます。
WOFF形式は、Web配信に特化して設計されており、ファイルサイズが圧縮されて小さくなるため、読み込み速度の向上や通信量の削減に効果的です。
TTFをWOFFに変換するには、フリーソフト（WOFFコンバータ）やコンバーターを利用します。
WOFF形式に変換されたファイルをダウンロードして、assets配下に配置します。
④CSSで読み込み。
サブセット化は手間がかかりますが、パフォーマンス改善効果が大きいため、アクセス数の多いサイトには特におすすめです。
それぞれのメリット・デメリット
| 方法 | メリット | デメリット | |
| @importで読み込む方法 |
CSS内で完結、導入が簡単 | 読み込みが遅くなる可能性あり、FOUTが発生しやすい | |
| CDNから読み込み |
管理不要で初心者向け、キャッシュが効きやすく高速化 | 外部サービス依存 | |
| サブセット化 | 容量削減と高速化が可能 | サブセット作成の手間がかかり、文字追加時に再作成が必要 | |
まとめ
Webフォントの導入は、ウェブサイトのデザイン性やユーザー体験を向上させるのに効果があります。
しかし、特に日本語フォントのようにファイルサイズが大きい場合、適切な読み込み方法を選択し、最適化を行うことでパフォーマンスへの影響を最小限に抑えることがポイントです。
今回ご紹介した方法をぜひ参考に、Webフォントの最適化を検討してみてください！