font

Noto SansをWeb font化しようとした時にハマった話

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の処理のみで済みます。

参考ページ

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で良ければそのまま使えるはずです。

その他