AA表示用の軽量なフォント(43KB)を作った

どうも@scrpgilです。
AAHubというまとめzipビューワーやAA箱を作っているAAエンジニアです。

さて私は基本Webサービスを作ることが多いんですが、そこで問題になるのがAA対応の日本語フォントファイルが重いという問題です。

この記事では私がFontForgeを使って日本語フォントファイルの容量を削減した時の内容を書きます。

日本語フォントファイルのサイズ感

さて、以前使っていた日本語フォントファイルのサイズは以下の通り。

AAHub Fonts
ttf: 2.6MB
woff: 1.6MB
woff2: 1.3MB
https://fonts.aahub.org/font/1

woff2の状態でも1.3MBあります。そして厄介なことにAAという性質上、このフォントを読み込むまでまともに動作しません。

一様他にも軽いフォントはあるものの、それでも400KBほどになります。

Saitamaar
ttf: 2.6MB
woff: 590.9KB
woff2: 398.1KB
https://fonts.aahub.org/font/6

私は、当時Lighthouseの点数アップになみなみならぬ情熱を注いでいたので極限までフォントファイルを軽くすることにしました。そして作ったのが以下の「aahub_light」フォントです。

aahub_light
ttf: 94.9KB
woff: 57.9KB
woff2: 43.9KB
https://fonts.aahub.org/font/2

なんとwoff2の状態で43.9KBしかありません。しかしそれでいてAAの表示は問題なく行えます。

何をしたか？？

漢字グリフを全て削除しました。漢字は等幅なのでAAを表示するだけなら必要ないといった感じです。
例えば、以下の漢字は全部同じ幅です。
　亻人艹丁十
　間凧越蟹願

というわけでFontForgeを使って漢字グリフを全て削除しました。それだけで、1.3MBあったフォントファイルが43.6KBまで小さくなりました。

まとめ

フォントファイルが小さくなったことでサイトの表示が圧倒的に高速化されました。なかなかフォントファイルをいじる機会はなかったのでこのような体験ができてよかったです。

昨今はIoTやウェアラブルデバイスなどハードの要件が厳しい環境も出てきているので、こういったフォントファイルの変更はもしもの時の手段の一つとして覚えておいて損はなさそうです。
それでは。