Googleが、Noto SansというFontをOpen Source Licenseで配布を始めました。
Noto Sansの日本語/中国語簡体字版のFontをWeb Font化しようとしてハマった時の話と、最終的にWeb Font化した成果物をおいておきます。
Web Font化の全体の流れ & ハマりポイント
ttfやotf形式のFontをWeb Font化するには、以下のような流れで処理します
1. 元のFont fileをDownloadする
2. FontをSubset化する
3. Web fontとして使える様に各種形式に変換する (一般的にはeot, ttf, woffの3つを用意しておけばOK)
4. cssでfont指定する
が、ここでポイントなのが2です。
ご承知のように日本語や中国語などはFontのFile sizeがそもそも大きいです。例えば上記のNoto Sansの日本語Fontは1つ16MB近くあります。
どうやら、FontのFile sizeが大きすぎるとBrowserの制限なのかWeb fontとして使えないみたいで、BrowserはFont fileをちゃんとDownloadしているのに表示に使ってくれません(ここにハマりました)。そのため、File sizeが大きいFontでは、Subset化してFile sizeを減らす処理が必須になります。逆に、英語用などそもそもFile sizeが小さいので、Subset化は必要なく、1/3/4の処理のみで済みます。
参考ページ
- [Noto Sans CJK JP フォントをダウンロードしてサイトに適用する手順]
(http://qiita.com/nowri/items/1c69b9b25f2958bd9f97)
Fontのサブセット化って何?
ググって貰えれば詳細な記事が見つかると思いますが、必要な文字だけを切り出してFile sizeの小さいFontを作る処理です。
例えば一般的な日本語Fontは、5000-15000文字ぐらいを収録しているのですが、第1水準漢字だけで事足りるのであれば、3000文字ぐらいで済みます。3000文字分だけ収録された(Subsetの)Fontを作る事をSubset化と呼びます。当然File sizeは小さくなります。
サブセット化をする便利ツールはあるので、悩みどころは必要な文字のリストを作る所です。日本語/中国語簡体字の場合、以下に参考と成る文字リストがあります。更に文字数を絞ったFontが必要な場合に参考にして下さい。
Fontを別formatに変更する方法
woffコンバーターを使うと、woff/ttf/eot間でformat変更ができます。
Web fontとして使えるSubset化済みFont file
以下に、Subset化済みのNoto SansのFont fileが置いてあります。このFile sizeで良ければそのまま使えるはずです。
その他
- cssでfont-faceにunicode-rangeという値をSetすることで、fontのSubset化も可能です（が、以下のような懸念もあります)
- Downloadするfont fileのサイズが小さくなる訳では無い(あくまでBrowser側でsubset化を行います)
- Browserの対応/非対応がある可能性がある