無料の日本語webフォント「Noto Sans Japanese」を使ってみました

GoogleとAdobeが共同開発したフォントに「Noto Sans」というものがあります。これは世界中のあらゆる言語をサポートすることを目標に作られたフォントです。

世界中の言語をサポートすることを目標に、Apache License 2.0 のライセンスで配布が開始された。2015年9月29日に、SIL Open Font License 1.1 にライセンス変更。 コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□)が表示されることが多いが、Googleではそれを”豆腐”と呼んでおり、Webから取り除くためにNoto(no more tofu)フォントを作った

名前が日本語の「豆腐」から来ているというのは意外でしたが、GoogleとAdobeが開発しただけあって読みやすく綺麗なフォントで、太さも細いものから太いものまで7種類も用意されているので非常に使い勝手が良いフォントです。

そんなNoto Sansのwebフォント版が「Google Fonts」にて「Noto Sans Japanese」という名前で試験的に提供されていたので、使ってみることにしました。

Noto Sans Japaneseの使い方

使い方はとても簡単で、googleにホストされているcssファイルを@importかstyleタグで読み込み、フォントファミリーの指定をするだけで使うことが出来ます。

@importで読み込む場合

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

CSSファイル内に上記を追記すればOKです。

styleタグで読み込む場合

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

HTMLの<head>~</head>内で上記を記述すればOKです。

フォントファミリーの指定をする

CSSを読み込んだら、後は使いたい箇所にフォントファミリーの指定をします。
例えば、H1とH2だけ使いたい場合は以下のように記述します。

<style>
h1, h2 {
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 900;
}
</style>

また、フォントを太さを変えたい場合はfont-weightの値を変更します。一番細いもので100、一番太いもので900まで用意されているので、数値変えながら好みの太さに調整していくのが良いと思います。

導入のメリット

これは間違いなく綺麗なフォントが、OSやブラウザを選ばずに使える所です。また、ウェイト(文字の太さ)の種類が多いのも魅力的ですね。OSに標準で入っているフォントって、ウェイトがnormalとboldの2種類しかないみたいな事が良くありますし。。

導入のデメリット

導入自体はかなり簡単に出来るのですが、やはり日本語webフォントの宿命というべきフォントファイルのサイズ問題があります。

ファイルサイズが大きい

実際にFirefoxの開発ツールで確認すると「NotoSansJP-Light.woff2」という名前でフォントファイルがダウンロードされており、サイズが約1.5MBと、かなり大きいことがわかります。

さすがにこれだけファイルサイズが大きいと表示速度にも影響が出てしまうと思います。大手サイトがこのフォントを採用するか、ブラウザやOSレベルで標準で入らない限り、なかなか本格的には使いづらいかなぁというのが正直な印象です。

とは言え、Google Fontsに日本語が追加されたことは日本語webフォントの大きな前進である事は間違いなく、今後にも注目です。

2016.07.02追記
Noto Sans Japaneseのサブセット化に挑戦してみました。結構軽くなった!