Webで何らかの事業を行ったり、コンテンツを更新したりする際に使用することが多いWebフォントですが、フォントの中でも比較的重いことが特徴です。そのため、最適化されたWebフォントを使用しなければ、Webサイトやページスピードが遅くなるデメリットが生じます。
本記事では、Webフォントの概要や高速化のために知っておくべきこと、併せてサブセット化についてご説明します。また、日本語Webフォントのサブセット化方法に関してもご紹介しますので、高速化のためにもぜひ参考にしてください。
目次
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フォントの種類を含め、使用しない漢字も特定できれば確実に高速化は実現できると言えます。
サブセット化とは?
先程、日本語Webフォントは数が多いため、使用しない文字列を把握し、使用する文字のみを特定することが大切だと解説しました。そこで有用なのが、日本語Webフォントのサブセット化です。
サブセット化とは、使用する文字のみが集約されたフォントファイルを作成することです。サブセット化によって使用する文字のみがファイルに入っているため、不要な文字の読み込みをしなくて良くなり、結果高速化が図れるようになります。
日本語Webフォントのサブセット化方法
ここからは、上述した日本語Webフォントのサブセット化方法をご説明します。手順は下記のとおりです。
- フォントのダウンロード
- フォントメーカーを使う
- woffに変換する
それぞれ順番に見ていきましょう。
フォントのダウンロード
まずは、使用するフォントをダウンロードします。ここでは、例として「M+PLUS+1p」を使用すると仮定します。M+PLUS+1pのサイト内を進んでいくとttfファイルをダウンロードできます。ファイルの拡張子は「TrueTypeフォント:.ttf、.ttc」にしておきましょう。
フォントメーカーを使う
フォントメーカーとは、ファイルをサブセット化できるツール(システム)のことです。「サブセットフォントメーカー」と呼ばれるツールがあるので、こちらをダウンロードします。次にダウンロードしたttfファイルを、「作成元フォントファイル」として選択します。
「作成後フォントファイル」に、PC内の保存する場所を指定し、作業を開始すればサブセット化が完了です。
woffに変換する
最後に、上記で作成したフォントファイルを、woffに変換しましょう。これは、Webフォントとして使用するには、woffにする必要があるためです。方法は複数ありますが、「WOFFコンバータ」と呼ばれるツールがあるため、手順に沿って変換をしましょう。
最後に、指定ディレクトリに上記で作成したwoffファイルを配置し、CSSでWebフォントの記述をすれば高速化は完了です。
まとめ:Webフォントの高速化を実現しましょう
本記事では、Webフォントの概要や高速化のために知っておくべきこと、実際の手順を解説しました。特に日本語のWebフォントは数が非常に多く、すべてを読み込んでしまうとページスピードに悪影響が出ます。
それらを防ぐためにも、本記事で解説したサブセット化の方法を実践し、Webフォントの高速化を実現してみてはいかがでしょうか。
無料Webサイト高速化診断で課題を見える化!【毎月5社限定】
株式会社デジタルアイデンティティでは、毎月先着5社限定で無料の高速化診断を実施しています!
高速化に関するこんなお悩みはありませんか?
- 高速化でどこから手をつければいいかわからない…
- 自社で高速化をしてみたが、効果が上がらない…
- PageSpeed Insightsのスコアが良くならない…
- 高速化ができるリソースがない / 人材がいない…
Webサイト高速化は、同じ項目であってもサイトの状況によって、対応するべきポイントが変わる難易度の高い施策です。
自社での対応が可能な場合もありますが、難易度の高い施策が必要な場合もあります。
そんな時は、無料の高速化診断をお試しください!
様々なサイトの高速化を実現してきたプロが、あなたのWebサイトを分析!
高速化に必要な施策と施策毎の難易度、改善後のインパクトまで、まとめてご報告します!
- どんな施策をすれば良いか?
- どの施策から実施するか?
- どの程度、スピードを改善できそうか?
など、高速化施策の方針が明確化します!
ただし、毎月先着5社様限定となっておりますので、お早めにお申し込みください!