Note Sans Japaneseをサブセット化して、軽くしてみた

GoogleとAdobeが共同で開発した「Noto Sans」フォント。このサイトでもタイトル周りを中心に一部「Noto Sans Japanese」を使っていました。

ただ、上記記事でも書きましたが、ファイルサイズが結構大きく1フォントあたり1.5MBほどの容量があります。googleにキャッシュされているものを読んでいるので多少速いとは思いますが、やはり軽いに越したことはありません。

そこで調べていると、フォントのサブセット化を行えばかなり軽くなる事が分かりましたので、試してみました。

サブセット化とは

フォントの中に含まれている文字の中から、必要なものだけを抜き出してファイルサイズを小さくする事です。「Note Sans Japanese」の場合、ひらがな、カタカナ、漢字、記号などが含まれており、約7,000文字ほどになります。
その中から、実際に使いそうな、ひらがな、カタカナ、第一水準漢字（2965字）、記号などを選んでサブセット化してみます。

サブセット化に必要なもの

以下のファイルやソフトを用意します。

「サブセットフォントメーカー」「woffコンバーター」は武蔵システムという会社が作っているフリーソフトで、windows、macそれぞれソフトが用意されています。

サブセットフォントメーカーでサブセット化

まずは「サブセットフォントメーカー」を使って、Noto Sans Japaneseをサブセット化してみます。※画面はmacですが、windowsでも同じです。

「作成元フォントファイル」に、Noto Sans Japaneseを指定します。
「作成後フォントファイル」は任意の名前を付けてください。
「フォントに格納する文字」に、欲しい文字を入力します。これを自分で見つけるのは大変ですが、第一水準漢字、記号、ローマ字、カタカナ、ひらがなのリストが下記ブログで公開されていますので、ありがたく使わせていただきます。

出来たファイルをwebフォントとして使える形式に変換

上記工程でサブセット化されたフォントファイルは用意できましたが、このままではwebフォントとしては使えないので、webフォント用の形式に変換します。ここで使うのが「woffコンバータ」です。

「変換前ファイル」に、先ほど作ったサブセット化されたフォントファイルを指定します。
IE8以前でも使えるEOTファイルも同時に作りたい場合は「EOTファイルを作成する」にチェックを入れます。準備が整ったら変換開始を押せば、woff形式のファイルが（EOTファイルにチェックを入れた場合はEOTファイルも）出来上がります。

ファイルをアップロードして、CSSに指定します。

出来上がったファイルを使うには、まずファイルをサーバにアップロードし、その後CSSでそのフォントファイルを指定してあげます。
古いIEやAndroidなどを無視した、最低限の記述が以下のとおりです。

@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    src: url('../font/NotoSansJP-Regular.woff') format('woff');
}

古いIEに対応したい場合、EOTファイルの指定が必要です。
また、Androidは4.3以前はwoff形式に対応していないため、別途ttfファイルの用意と指定が必要ですのでご注意を。

自分の場合、標準のウェイトの他にも、細いウェイトのフォントが欲しかったので、

@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 100;
    src: url('../font/NotoSansJP-Thin.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 200;
    src: url('../font/NotoSansJP-Light.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 400;
    src: url('../font/NotoSansJP-Regular.woff') format('woff');
}

以上の様に3種類用意しました。

ライセンスについて

Noto Sans japaneseは、SIL Open Font License 1.1で配布されています。個人利用・商用利用にかかわらず無償で使用することができ、改変版を作成したり、Webフォントとしての利用が認められています（なお、販売は認められていません）。
なので、自分でサブセット化して使うことが出来るんですね。

肝心のファイル容量はどうなった？

以前googleから読んでいた時には、1フォントあたり、1.5MBほどの転送量だったのに対し、サブセット化したものは1ファイルあたり500KB台と、約1/3ほどになっています。このくらいのサイズであれば許容範囲内では無いでしょうか？

多少手間はかかりますが、サブセット化することにより大幅にファイルサイズを小さくすることが出来ました。日本語webフォントはファイルサイズが最大のネックなので、それが解消されればもっと幅広いサイトで使われるかもしれませんね。