ウェブフォントのサブセット化で表示遅延を改善

|

ウェブフォントを活用する際、たいていはHTMLタグのヘッダー内に無料ウェブフォントサイトのURLを貼り付けておしまいといったやり方が多いかと思います。

無料ウェブフォントはGoogleフォントやモリサワフォントなどが人気ですが、手軽に利用できる反面、フォントが表示されるまでの時間が遅くなるといったデメリットがあります。

このフォントの表示が遅延する理由は、使わないフォントまで「フルセット」で利用しているからです。特に和文フォントの場合、一般的なサイトでは常用漢字ぐらいまでしか使わないかと思いますが、不必要なフォントもフルセットで使うとファイル容量が大きくなり、フォントの表示に遅延が生じてしまいます。

最低限、自サイトで使用している文字のフォントだけあれば事足りるわけですので、全部をフルセットでダウンロードする必要はありません。

この自サイトで必要なフォントだけを抜き出して利用することで、フォントのファイル容量が軽減するため、サイトの表示の遅延を解消することができます。これはフルセットに対して、サブセットといわれているものですが、一瞬の表示の遅延が気になる方はフォントのサブセット化にトライされてみることをおすすめします。

一般的には、woffなどのフォントファイルをサーバーにアップロードし、CSSで@font-faceを指定して表示させることになります。

ただし、サブセット化のプロセスで使用する文字の選定などが必要なため、何らかのツールが必要になりますが、ネット上に無料ツールなどが公開されているため、それらを使用して対応されるとよいでしょう。