Webサイト作成で「Webフォント」を使うと、読み込みが遅くてサイトにアクセスした際に
文字が重なるなど表示が崩れることがあります。
Webフォントの読み込みが遅い対策として「サブセット化」がありますが、
サブセット化とは何なのか、どうすれば良いのかなどを詳しく見ていきましょう。
Webフォントのサブセット化とは？
「サブセット化」とは、
Webサイト作成に必要な文字だけあらかじめピックアップしておくことです。
日本語フォントには、
・ひらがな
・カタカナ
・漢字
・数字
・アルファベット
といった種類の文字が全て入っています。
ひらがな・カタカナ・数字・アルファベットはともかく、
漢字は旧字体など絶対に使わないものがたくさんあります。
絶対に使わない文字を省いて必要な文字だけあらかじめピックアップして
サーバーに収納しておくことをWebフォントのサブセット化と言うのです。
サブセット化することでWebフォントの読み込みが早くなって、
文字が重なるなど表示の崩れが少なくなります。
Webフォントをサブセット化する方法
Webサイトで使うWebフォントをサブセット化するには、
まずWebサイトで使いたいWebフォントをダウンロードしてください。
ちなみにWebフォントは「Google Fonts」などのサイトでダウンロード可能で、
無料のものもあれば有料のものもあります。
Webフォントには商用利用不可などの制限が設けられていることがあるので、
Webサイトで使用する場合はライセンスをしっかりと確認しておきましょう。
Webフォントをサブセット化できる形式に変換する
Google FontsなどでダウンロードしたWebフォントは
そのままではサブセット化できないので、サブセット化可能な形式に変換します。
武蔵システムさんの「WOFFコンバーターを使うと、
Webフォントをサブセット化できる形式に簡単に変換可能です。
（参照：https://opentype.jp/woffconv.htm）
WOFFコンバーターをダウンロードして起動したら、
「変換前ファイル」の項目でサブセット化したWebフォントファイルを選択します。
「変換後ファイル」で変換後のフォントファイルを保存する場所を選択し、
「変換開始」を選択すれば完了です。
変換が完了すると選択した保存場所に、
拡張子が「.otf」もしくは「.ttf」に変換されたフォントファイルが作成されます。
変換したWebフォントをサブセット化
WOFFコンバーターで変換したWebフォントをサブセット化するには、
こちらも武蔵システムさんの「サブセットフォントメーカー」を使うと簡単です。
（参照：https://opentype.jp/subsetfontmk.htm）
サブセットフォントメーカーをダウンロードして起動、
「作成元フォントファイル」で先に変換したフォントファイルを選択します。
「作成後フォントファイル」の項目では、
サブセット化したフォントファイルを保存する場所を選択しておきます。
「フォントに格納する文字」の項目にWebサイト作成で使う文字を入力、「作成終了後、
WOFFコンバーターを起動する」にチェックは入っているのを確認してください。
最後に「作成開始」を押すと、
先に選択した保存場所にサブセット化されたフォントファイルが作成されます。
フォントに格納する文字
フォントファイルをサブセット化するには、「フォントに格納する文字」で
Webサイト作成に必要な文字を入力しなければいけません。
現状作成しているWebサイトで使っている文字を1つ1つ入力するのは大変ですし、
更新の際に新たに使う文字が増える可能性もあります。
そこで「フォントに格納する文字」には、「日本語WEBフォントをサブセット化する際の
参考文字列一覧」を使うと便利です。
（参照：https://u-618.org/webfont-subset/）
日本語WEBフォントをサブセット化する際の参考文字列一覧の「JIS第1水準+
常用漢字+その他」を「フォントに格納する文字」の項目にコピペしましょう。
JIS第1水準と常用漢字で一般的に使う漢字、
その他でひらがな・カタカナ・数字・アルファベット・記号が網羅できます。
サブセット化したフォントファイルを再変換
最後にサブセット化した拡張子が「.otf」や「.ttf」のフォントファイルを再変換します。
拡張子が「.otf」や「.ttf」のままでも良いのですが、ファイルサイズが大きいので
せっかくサブセット化しても読み込みが遅いままとなる恐れがあるのです。
再度WOFFコンバーターを使って、
ファイルサイズの小さい「.woff」や「.woff2」に拡張子を変換します。
WOFFコンバーターを起動したら、
「変換前ファイル」でサブセット化したフォントファイルを選択してください。
「変換後ファイル」で変換したフォントファイルの保存先を選択、
「WOFF2を作成する」にチェックを入れて「変換開始」ボタンを押せばOKです。
ちなみに「.woff」は古いバージョンのIEを除く全てのブラウザに対応、
「.woff2」はIE以外のブラウザに対応してい「.woff」よりも読み込みが早いです。
後はCSSを使ってWebサイト作成でサブセット化したフォントファイルを反映させれば、
フォントの読み込みが早くなって表示崩れが減ります。
Webフォントをサブセット化する際の注意点
Webフォントをサブセット化する際の注意点として、1つにはサブセット化する
WebフォントがWebサイトで利用可能かどうかの確認が必要なことです。
先にも書きましたが、Webフォントには商用利用不可などの制限が
設けられていることがあり、作成しているWebサイトでは利用できないことがあります。
ダウンロードする前にWebフォントのライセンスをしっかりとチェックして、
Webサイトで利用できることを確認しておきましょう。
もう1つの注意点として、
「改変・再配布」が可能であることを確認しておかないといけないことが挙げられます。
サブセット化は改変に、
サブセット化したフォントファイルをWebサイトで使うと再配布となる可能性があります。
Webフォントのライセンスに改変・再配布に関する情報が記載されているので、
事前にチェックしておきましょう。
サブセット化が改変・再配布に当たるか分からない場合は、
Webフォントを公開しているサイトなどに確認してください。
Webフォントの読み込みが遅い原因
Webフォントの読み込みが遅い原因としては「Webフォントのデータが大きいこと」が
挙げられます。
日本語フォントには
・ひらがな
・カタカナ
・漢字
・数字
・アルファベット
といった種類の文字が全て収納されています。
漢字だけで6000文字以上ですから、
英語など外国語フォントに比べるとデータ量が大幅に大きくなるのです。
サブセット化してデータ量を小さくすることで、Webフォントの読み込みを早くできます。
Webフォント以外のデータが大きい
Webフォントの読み込みが遅い原因には、Webフォント以外のデータが大きいことも
挙げられます。
Webサイトにアクセスすると、Webサイトデータを収納しているサーバーでは
1.HTML
2.CSSやJavaScript
3.画像
4.Webフォント
の順番で処理が行われるのです。
Webフォントの処理は一番最後なので、Webフォント以外のデータが大きいと
必然的にWebフォントの読み込みが遅くなってしまうというわけです。
まとめ
Webフォントをサブセット化することで、
Webフォントのデータが小さくなって読み込み速度の改善が期待できます。
ただWebフォント以外のデータもWebフォントの読み込み速度に関係します。
もしサブセット化してもWebフォントの読み込みが遅い場合は、
Webフォント以外のデータを整理・縮小してみてください。