（前日だけ空いてしましましたが）パーソンリンクアドベントカレンダー、折り返し地点を超えた13日目の投稿です。
今回はwebサイトでのカスタムフォントのサブセット化について書きます。
フォントのサブセット化とは
フォントを特定の文字のデータだけ抽出したフォント(サブセット)に分割する事をサブセット化と呼んでいます。
たとえば、英文字しか使ってないページでは、英数字のサブセットフォントのみ使用する、といった事が考えられます。
最小限のサブセットのみ使うようにすれば、ページ表示時間短縮や通信データ量の短縮が期待できます。
Googleによる詳細な解説
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
サブセット化のパターン
サブセットの分け方としてはおおよそ以下の３つが考えられます
-
英数字、記号、かな・カタカナ、第１水準漢字、第２準漢字といった文字としての意味をもったサブセット
英字はいいけど、漢字の容量が大きいのは変わらない・・・ -
サイト内で実際に使用している文字のみを持つサブセット
使用する文字が決まっている、すなわちテキスト部分が静的なサイト向け。 -
出現頻度や同時に出現する確率で分けたサブセット
動的コンテンツのサイトで特に有効。
すべての文字をカバーしつつ、ページごとに最小限のフォントファイルの読み込みを行おうとします。
実際にやってみる
今回は3の方法でサブセットを作成するために、簡単なスクリプトを用意してみました。
font-google-subset
以下、スクリプトの内容と実行手順です。
フォントのサブセット範囲を決める
Google FontsのNoto Fontのcssを見ると、unicode-range を使って読み込むサブセットを細かく指定しています。
どういうアルゴリズムで算出した分け方なのかは公開されていないようですが、恐らく使用頻度や文字の種類、漢字の部首グループなどで分けれているのだと思います。
今回はこのunicode-rangeの分け方を拝借します。
https://fonts.googleapis.com/css?directory=3&family=Noto+Sans+JP
フォントのサブセットを作成
font-rangerを使い、全パターン分のサブセット作成と、サブセットに対応した@font-faceのリストを持つCSSファイルの生成を行います。
サブセット化したフォントを読み込むCSSを作成
font-rangerでサブセットと同時に出力されたCSSを１つのファイルに統合して、Google FontsのCSSと同様のものを作成します。
あとは作成したCSSとサブセットフォントをサイトに配置するだけで、各ページで必要に応じたサブセットをブラウザが読み込んでくれます。
なお、@font-faceは古いブラウザだと対応していませんので、そういう環境でもフォントを使いたい場合はfallbackとしてttf/woffを用意する必要があります。
実際に実行してみる
以上の手順を実行する簡単なスクリプトを用意してみました。
font-google-subset（実行手順はREADME.md参照 / 一部ttfなどは動かないようです）
なお、実際にサイトで使用する際は使用するフォントの利用規約に注意してください。
フォントのサブセット化は、各フォントの規約における改変にあたる可能性があります。
参考にさせていただいた記事
[日本語 Web フォントの読込み速度を改善する - その1] (https://qiita.com/megurock/items/da484d4ec44577ae7f95)
以上となります。明日は@shothymさんの記事ですね。お楽しみに！