Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

その他

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした