HTML
CSS
font
日本語
webfont

Google Fontsに日本語WEBフォントが正式追加された話

先日、Google Fontsに日本語WEBフォントが正式追加されたようです。

WEBフォントを使用すると、どんなデバイスでも、どんなブラウザでも、同じフォントを使用することができるので良いですよね。(自分は使いたい派ですw

というわけで、ちょっと紹介を。


追加された日本語WEBフォント

追加されたのは下記8種です。(早期アクセスで提供されていたものとは少し違うらしい。


  • Noto Sans JP

  • Noto Serif JP

  • M PLUS 1p

  • Sawarabi Mincho

  • M PLUS Rounded 1c

  • Kosugi Maru

  • Sawarabi Gothic

  • Kosugi

フォントの公開ページは下記です。

https://fonts.google.com/?subset=japanese

サンプルで表示してみるとこんな感じ。(下記はキャプチャした画像です。

自分は Kosugi Maru とか気に入ってますw

日本語WEBフォント.png


気になるファイルサイズ(ダウンロードサイズ)は?

WEBフォントの欠点は、やはりフォントをダウンロードしないといけないという点だと思います。

キャッシュしてしまえば都度ダウンロードされることはないとはいえ、やはり気になりますよね。

というわけで、サクッと調べてみました。(簡単にブラウザの開発ツールで見ただけですw


CSSファイル

まずは各フォントのCSSファイルですが、これは各フォント共通で 25KB 程でした。

WEBフォントCSS.png


Noto Sans JP

大きいもので 48KB 程度、だいたい1ファイル 40KB 前後といったところ。

Noto Sans JP.png


Noto Serif JP

大きいもので 60KB 程度、だいたい1ファイル 55KB 前後といったところ。

Noto Serif JP.png


M PLUS 1p

大きいもので 22KB 程度、だいたい1ファイル 18KB 前後といったところ。

M PLUS 1p.png


Sawarabi Mincho

大きいもので 30KB 程度、だいたい1ファイル 25KB 前後といったところ。

Sawarabi Mincho.png


M PLUS Rounded 1c

大きいもので 28KB 程度、だいたい1ファイル 22KB 前後といったところ。

M PLUS Rounded 1c.png


Kosugi Maru

大きいもので 28KB 程度、だいたい1ファイル 22KB 前後といったところ。

Kosugi Maru.png


Sawarabi Gothic

大きいもので 28KB 程度、だいたい1ファイル 22KB 前後といったところ。

Sawarabi Gothic.png


Kosugi

大きいもので 22KB 程度、だいたい1ファイル 20KB 前後といったところ。

Kosugi.png


フォントファイルは分割されている

上記フォントファイルのダウンロードを見ると、フォントファイルは1ファイルではなく、数ファイルダウンロードされているのが分かると思います。

これは、なるべくダウンロードサイズを減らすためにフォントを分割し、必要に応じてダウンロードする仕組みになっているのだとか。(20分割?)

全てのフォント(文字種)を使うことはまず無いと思うので、4~10ファイルぐらいで見積もっておけば良いのではと思います。

10ファイルで見積もって 240KB ~ 420KB といったところなので、なんとか実用には耐えうるのではないでしょうか。