サブセットフォントを作った

フォントのサイズが大きすぎて、サイト開いた後の読み込みが遅かったので、サブセットフォントを作ったら多少改善した。

経緯

このブログのフォントとしてCicaをwebフォント化したものを使っていたが、いくらwebフォントとして最適化されたwoff2といえど、 4MBx4スタイル=16MBくらいあって表示にラグを感じた。

SEO的にも良くないと思ったので、必要なフォントだけ残(=サブセット化)してサイズを減らすことにした。

pip install fonttools

pip install brotli

pyftsubset {フォント名}.ttf --text-file=chart.txt --layout-features="*" --flavor=woff2 --output-file={フォント名}.woff2

chart.txtは、残す文字の集合を全て記したテキストファイル。

たとえば以下のファイルを渡せばasciiのa,b,cだけからなるサブセットフォントが出来上がる。

chars.txt

abc

とりあえず今回は使用頻度の高いJIS第2水準までの漢字+カタカナ+ひらがな+asciiに絞ってみた。

あとは出力されたフォントを既存のものと入れ替えてビルドして表示。

見た目はそのままに、フォントの適用が目に見えて速くなった実感があるので良かった。