【Webフォントの高速化】サブセット化で実現する方法

表示高速化
更新日: 2025-10-14
yuta.tanaka

TanakaYuta SEO Div. コンサルタント

現在までに100社以上のSEO対策に従事し、様々なジャンル・キーワードで上位表示を実現。薬機法管理者の資格を有しているいること、SEOライターとして自身でもライティングができることから、広告表現が難しい医療・美容・健康を得意領域としている。「成分名」や「〇〇効果」などの難関キーワードでの上位表示実績多数。SNSでの情報発信にも力を入れており、約10,000名のフォロワーを獲得している。

執筆者の投稿をみる

Webで何らかの事業を行ったり、コンテンツを更新したりする際に使用することが多いWebフォントですが、フォントの中でも比較的重いことが特徴です。そのため、最適化されたWebフォントを使用しなければ、Webサイトやページスピードが遅くなるデメリットが生じます。

本記事では、Webフォントの概要や高速化のために知っておくべきこと、併せてサブセット化についてご説明します。また、日本語Webフォントのサブセット化方法に関してもご紹介しますので、高速化のためにもぜひ参考にしてください。

本記事では、Webフォントの仕組みと、ページ表示を高速化するための最適化・サブセット化の方法を解説しています。

Webフォントはネット経由で読み込むフォントで、端末環境に依存せず意図したデザインを再現できる。
不要な文字や書体を読み込むと表示速度が低下するため、使用範囲を絞ることが重要。
日本語フォントは文字数が多く重いため、使用文字だけを抽出する「サブセット化」による軽量化が可能。
サブセット化はフォントのダウンロード、ツールでの加工、woff形式への変換で行える。
フォント最適化を行うことで、デザインを保ちながらWebサイトの表示速度を大幅に改善できる。

【今だけ無料】PageSpeed Insightsを100ページ一括自動診断！

「トップページは改善したが、下層ページは放置気味…」「1ページずつ手動で計測するのは手間がかかる…」
そんなお悩みを解決！最大100ページを自動で計測し、修正優先度付きのレポートを無料で作成します。サイト全体の「健康状態」を把握したい方は、今すぐお申し込みください。

【今だけ無料】一括診断のお申し込みはこちら

1 Webフォントとは？
2 Webフォント高速化のために知っておくべきこと
- 2.1 使用しない文字と書体を読み込まない
- 2.2 使わないWebフォントを把握する
3 サブセット化とは？
4 日本語Webフォントのサブセット化方法
5 まとめ：Webフォントの高速化を実現しましょう
6 数時間の作業を一瞬で！PageSpeed Insights最大100ページを一括診断！

Webフォントとは？

まず、Webフォントの概要についてご説明します。Webフォントとは、サーバー上に予め置かれているフォントや、インターネット上で提供されているフォントのことです。WebフォントはCSS3にて策定された技術になります。

一昔前のWebサイトでは、Webサイトを制作する段階で、予め要素ごとに使用するフォントを指定していました。しかし、予め指定する上記の方法では、Webサイトを閲覧しているユーザーのPC等にフォントがインストールされていなければなりませんでした。その結果、製作者が指定した見え方とは異なる結果で表示されてしまうこともあったのです。

したがって、これらの問題を解決できるのがWebフォントです。Webフォントでは、読み込みの段階でフォントデータをネットワークからダウンロードできるため、製作者の意図するフォントをユーザーに表示できます。

Webフォント高速化のために知っておくべきこと

ここまで、Webフォントの概要をご説明しました。ここでは、Webフォント高速化のために知っておくべき下記2つをご紹介します。

使用しない文字と書体を読み込まない
使わないWebフォントを把握する

それぞれ順番に見ていきましょう。

使用しない文字と書体を読み込まない

まずは、使用しない文字と書体を読み込まないことが大切です。たとえば、ページ内の特定の一部にしかWebフォントを使用しないとします。そこで、titleタグしかWebフォントを使用しないのに、ページ内のすべてでWebフォントが読み込まれる記述がされているなどの例が挙げられます。

この場合、当然ながらWebフォントはtitleタグのみで良いため、その他が読み込まれる分表示速度は遅くなります。これらを防ぐためにも、必ず使用しない文字と書体は読み込まない記述をするようにしましょう。

使わないWebフォントを把握する

次に、使用しないWebフォントを把握することも大切です。しかし、前提として使用しないWebフォントが分からない方も多いのではないでしょうか。たとえば、titleタグなど特定の一箇所にのみWebフォントを使用するのであれば、使用しないWebフォントを把握するのは容易かもしれません。しかし、リード文や本文など、至るところでWebフォントを使用するのであれば、使用しないWebフォントを把握するのは非常に困難です。

そこで有用なのが、日本語のWebフォントのそれぞれの特徴を把握することです。

JIS第1水準漢字
JIS第2水準漢字
ひらがな
カタカナ
全角英数字
半角英数字
記号

日本語Webフォントは上記の種類に分けられるため、それぞれの特徴を理解し、使用しないで済む文字列を特定することから始めましょう。特に、日本語Webフォントは漢字が非常に多いため、すべてを読み込むと高速化に悪影響が出ます。したがって、日本語Webフォントの種類を含め、使用しない漢字も特定できれば確実に高速化は実現できると言えます。