お久しぶりです。
アドベントカレンダー以外での投稿です。
とある案件で時間を表示するWebアプリを作っていたのですが、その時に独自のフォントを使うことになり、
これがなかなかのデータサイズだったのでフォントのサブセット化を行いました。
その時に調べたことをまとめます。
作っていたアプリ
数字で時間を表示するアプリです。
ここに独自のフォントを当てます。
| イメージ図 |
|---|
 |
使用するフォントは以下の通りです。
0123456789:
サブセット化前のサイズ
とりあえずサブセット化しない状態で、使ってみます。
※ 案件で使っているフォントは見せられないので、 たぬき油性マジック で代用します。
| 計測 |
|---|
 |
時計を表示するだけなのに フォントファイルだけで 8.8MB あります。
デカすぎる。
サブセット化
フォントのサブセット化を行います。
fonttools というものが良さげだったのそれを使うことにしました。
インストール
poetry でインストールします。
$ poetry add fonttools
サブセット化したフォントファイルを作成
fonttools のコマンドでサブセット化を行います。
$ poetry shell
$ pyftsubset ./TanukiMagic.ttf --text=0123456789: --layout-features='*'
// TanukiMagic.subset.ttf というファイルが生成される
サブセット化後のサイズ
サブセット化したフォントファイルをWebアプリに当てて再度計測します。
| 計測 |
|---|
 |
サブセット化後は 8.8MB から 6.6KB になりました。
いい感じです。
さらなる高みへ
サブセット化したフォントファイルをさらに圧縮することもできます。
woff2 に変換をすることでファイルサイズをさらに小さくすることが可能です。
インストール
fonttools と別途 brotli をインストールします。
$ poetry add fonttools
$ poetry add brotli
サブセット化したフォントファイルを作成(woff2)
サブセット化しつつ、 woff2 に変換します。
$ poetry shell
$ pyftsubset ./TanukiMagic.ttf --text=0123456789: --layout-features='*' --flavor=woff2
// TanukiMagic.subset.woff2 というファイルが生成される
woff2 化後のサイズ
woff2 化したフォントファイルをWebアプリに当てて再度計測します。
| 計測 |
|---|
 |
3.2KB とかなり軽量になりました。
woff2 の注意
一部ブラウザやバージョンによっては woff2 がサポートされていない場合があるので、その辺りは確認しておくと良いです。
参考: https://caniuse.com/?search=woff2
まとめ
フォントのサブセット化を行うことでフォントファイルを軽量化することができました。
また、さらに woff2 に変換することでファイルサイズをさらに小さくすることができました。
フォントサイズにお困りでしたら、ぜひ試してみてください。