fontforge
アスキーアート
AsciiArt
個人開発
Shift_JISArt

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

それでは。