Noto Serif CJK JP を Web フォントとして使う

仕事で明朝体のサイトを作ることになったので Noto Serif CJK が Web フォントとして使えないか、と調査した。 Noto Sans JP は CDN 配信されている が、Noto Serif JP は配信されていないので、自前でファイルを持つ必要があるのだ。これはめんどくさいぞ…。

まずは Noto CJK – Google Noto Fonts の “Region-specific Subset OpenType/CFF (Subset OTF)” というセクションから使いたいウェイトをダウンロード。今回は NotoSerifCJK-Regular.ttc を選択した。

Web フォントとして使用するために ttc ファイルを woff2 と woff に変換する。今回は WOFFコンバータ を使うことにした。 できたデモがこちら。

NotoSerifCJK-Regular をWeb フォントとして使用するデモ

ファイルサイズは woff2 で 4.5 MB、woff で 5.2 MB だ。これでも “Regision-specific Subset” とサブセット化されているものだが、まだ実用に耐えうるサイズじゃない。Chrome のネットワークエミュレーションで “Fast 3G” を選択するとダウンロードするのに 24.51 秒かかる。ちなみに通常の環境(光+Wifi)だと 674 ミリ秒。うーむ。

Noto Serif JP - 単にwoffに変換した状態

というわけでさらなるサブセット化に取り組むことにする。これには サブセットフォントメーカー を使う。 ネット検索し、「第一水準漢字+記号+ローマ字+カタカナ+ひらがな」のソースを探すが、信頼に足るものがいまいち見つからない。

まずはこちらさんを試す。 ん、なんだか漢字少なすぎじゃない?

Noto Serif JP - サブセット化1

ではこちらさんはどうだろう。 えぇ…、「j」がないよ…。

Noto Serif JP - サブセット化2

で、結局、漢字のセクションだけ後者、それ以外を前者から頂戴する形でサブセット化。 うむ。まぁこれでよかろう。

Noto Serif JP - サブセット化3

サーバーにアップロードして、と。

サブセット化した NotoSerifCJK-Regular を使用するデモ

Chrome DevTools で同じ条件(Fast 3G)で見てみると…、3.87秒。及第点じゃないだろうか。

Noto Serif JP - Noto Serif JP - サブセット化した後の計測

本日はこの辺で。

References

Articles

Resources