フォント「Noto Sans Japanese」のサブセット化で劣化した時の対処方法

フォント「Noto Sans Japanese」のサブセット化で劣化した時の対処方法 技術ネタ

日本語フォント「Noto Sans Japanese」のサブセット化した時にフォントが劣化してしまった時の対処方法についです。



なぜサブセット化しようとしたのか

GTMetrixで計測すると Total Page Size が 4.99MB となっており、ちょっとサイズ大きすぎない?と思い調べたところ、どうやらWordPressのテーマ「スワロー」では、「Noto Sans Japanese」という日本語のフォントを使っており、そのファイルサイズが大きいことがわかりました。
そのため、それを小さくすることが出来ないか調べてみました。

現状のフォントサイズ

まずは、フォントを詳細に調べたところ、以下の3つが使われているようでした。

フォントファイル名ファイルサイズ
NotoSansJP-Regular.woff22,182,944
NotoSansJP-Medium.woff21,631,896
NotoSansJP-Bold.woff21,711,168

トータルサイズが約 5.5MB もあることがわかりました。

フォントのサブセット化

「Noto Sans Japanese ファイルサイズ」でググると、サブセット化(※1)という方法でフォントサイズを小さくできることがわかりました。

※1
フォントセット内の使用しない文字を削除(サブセット)することだそうです。
早速、調べたやり方でサブセット化を試したところ、すんなり(?)成功しました。

ただ、サブセット化後のファイルサイズはかなりに小さくなったのですが、実際にそのフォントをWEBページに適用してみると、、、なんとフォントが汚くなっているではないですか!実際に比較した画像がこれです。
Noto Sans Japaneseのフォント比較
上段が変更前のフォントで、下段がサブセット化後のフォントです。

汚くなっていますよね?比較した文字数が少ないので、それほど気にならないかもしれませんが、このフォントで構成されたWEBページを見ると、明らかに汚く違和感があります。

サブセット化でフォントが汚くなってしまった理由

サブセット化のやり方を書いているサイトでは、武蔵システムという会社が作っているフリーソフト「サブセットフォントメーカー」と「WOFFコンバータ」を使用する方法が示されており、私もそのやり方で行っていました。

汚いフォントを見て、最初はやり方を間違えたのかな?と思い、手順の確認を行ったり、フリーソフトで変換時のオプション変更したり、また、フォントが壊れているのかと思い、再ダウンロードするなどして、何回もやり直しましたが、結果はかわらず、フォントは汚いままでした。

ここで挫折してしまい、数日放置していました・・・

原因はフリーソフトの仕様

しばらく放置していたのですが、ふと思い出し、色々ググると、同じような症状の人がいるではないですか!詳細を調べてみると、どうやら利用したフリーソフトの仕様であることが判明しました。確かに サブセットフォントメーカーを見ると、

フォントが、ヒント(OpenTypeフォントの場合)、カーニング情報、ビットマップデータ、OpenType機能を持っている場合、それらは削除されます。
と書かれており、フォントについて詳しくないのでよくわかりませんが、確かに仕様として情報を削除しているようです。これが原因で汚くなっていると判断しました。

別のやり方でサブセット化

このフリーソフトではダメだということがわかったので、またまたググって探しました。
探していると、 pyftsubset を使って変換すればできると書いてある ページを見つけたので、早速その方法を試してみました。
※やり方は↑のリンク先ページに詳しく書かれていますので、そちらを参照してください。

今度は無事に成功しました。フォントサイズも小さくなっていますし、文字が汚くなることもありませんでした。めでたしめでたし。

サブセット化対象の文字

これで終わり、と思ったのですが、フォントサイズが思ったより小さくなっていませんでした。500KB前後を想定していたのですが、800KB程度までしか小さくなっていませんでした。それでも、元から比べると十分小さくなっていますが・・・

このくらいのサイズにしかならないの?と思い、気になったので、またまたググり、フォントに格納する文字数によってサイズが変わることがわかりました。当たり前かもしれませんが・・・

今までは ①このページに紹介されている文字を対象にしていたのですが、②別のページを見つけたので、早速サブセット化しサイズを比較しました。

フォントファイル名ファイルサイズ
NotoSansJP-Regular.woff22,182,944806,712 (63%)582,336 (73%)
NotoSansJP-Medium.woff21,631,896814,172 (50%)585,248 (64%)
NotoSansJP-Bold.woff21,711,168837,024 (51%)602,644 (64%)

この通り②にすると、さらにサイズが小さくなりました。また、②のサイトに書かれている文字選定候補の理由が「技術ブログで必要な」と書かれていおり、本サイトもたまたま同じ技術ブログであったため、この文字を使わさせていただきました。ありがとうございます。

サブセット化を終えて

途中で文字が汚くなるといった事象が発生してしまいましたが、無事にサブセット化できサイズを大幅に小さくすることができました。
もし、サブセット化でフォントが汚くなり困っている方がいれば参考にしてください。

最後に、GTMetrixで再計測すると、4.99MB → 1.92MB と大幅に小さくなっていました。ページ速度はSEOにも影響するということなので、今後も色々改善していきたいと思います。