[最新版] Noto Sans JapaneseをWebフォントとして使う方法

by on with コメントはまだありません

Notoフォントは全ての言語に対応することを目指す野心的なフォント。GoogleとAdobeが共同開発したこのフォントは無料で利用できる。

※Adobeからは、『源ノ角ゴシック』として提供されている。

プログラミング用フォント『Source Code Pro』を開発したAdobeが関わっているおかげか、Notoフォント自体非常に美しい。

そんなNotoフォントは『Google Noto Fonts』なるプロジェクトで無料で公開されている。

Google Noto Fonts

今回は、このフォントをWebフォント ―すなわち、外部からダウンロードして使うフォントとして使う方法を紹介する。

 

実は面倒くさい、WebフォントでNoto Sans Japanese

Type SquareやFONTPLUSなど、Webフォント提供サービスは数多く存在する。サイトを見る端末にフォントがインストールされていなくとも、外部からフォントをダウンロードして使うため、端末ごとのフォントの見た目を統一できる素晴らしい技術だ。

NotoフォントはWebフォントとして無料で提供されているから、和文フォントを無料で使いたいとなった時のデファクトスタンダードになりつつある。無料で提供して一気に普及させるって、いつものGoogleのやり方だね。

ところがこのNoto Sans JapaneseをWebフォントとして使う方法がややこしい。というのは、その方法を紹介したページによって、導入方法や使い方がまちまちだからだ。メダパニに掛かったかのように混乱してしまう。それというのも、Noto Sansの日本語版を提供しているプロジェクト『Google Fonts : Early Access』にしょっちゅう変更が入るから。

Early Accessだから仕方ないけれど、フォントのURLが変わったり、サブセットが出来たりとせわしない。そうかといって、このフォントを使わないのは勿体無い。

今回はNoto Sans Japaneseを使う最新の方法を紹介し、併せてフォント軽量化についても語ろう。そして最後には、Androidに組み込まれているNotoを使う方法を解説する。

 

Noto Sans Japaneseの読み込みと使い方

まずは、Noto Sans Japaneseを外部からダウンロードする方法の解説から。そして、Noto Sans JapaneseをWebフォントとして使う上でまず厄介なのもこの部分。解説しているサイト毎に読み込み元、読み込み方が違う。

とはいえ、どんな方法を取るにせよ、サイトを観覧した人の環境にフォントファイルをダウンロードするという点は同じ。まずは一番簡単な方法を紹介しよう。

CSSファイルにこのインポート文を書く。urlに指定されているCSSファイル経由でNoto Sans Japaneseをダウンロードできる。

このインポート文をサイトのCSSに書けば、’Noto Sans Japanese’というフォント名で使えるようになる。例えばこのように……

これだけで、あらゆる端末で同じフォントを使えるようになる。次の章では、Androidユーザーに優しい方法を紹介する。

 

Android MarshmallowでNoto Sans Japaneseを使う

Android  MarshmallowにはNoto Sansがインストールされている。

そのため、Androidのローカルにあるフォントを使うように指定すれば、わざわざGoogleからフォントを貰ってこなくてもよくなり、その分だけサイトの表示速度が上がる。

もちろんiOSなど他のOSでサイトを見る分には関係のない話だけれど、やっておいて損はないだろう。

Android Marshmallowユーザーにはローカルフォントとして、そしてそれ以外のユーザーにはWebフォントとしてNoto Sans Japaneseを提供するというわけだ。

 

GoogleがおすすめするWebフォントの使い方

Androidに対応するためには、@font-faceというものを使う。これはフォントを定義するためのCSSの@ルールで、フォント名と、そのフォントのソース（フォントの読み込み元）などを指定できる。 詳しい使い方はGoogleのレファレンスが役に立つ。

ウェブフォントの最適化 | Web Fundamentals – Google Developers

このページでおすすめされている方法を見ていくと、ソースに『local』と『url』の二種類があることがわかる。

localは、サイトを観覧しているデバイス（PC、スマホ）に入っているフォントファイルを使う方法。対してurlは外部からファイルを取ってくるために使う。

この二つの方法を一緒に使えば、サイトで指定されているフォントがインストールされていればそれを使い（ローカルフォント）、無ければ外からダウンロードしてくる（Webフォント）ということが出来る。

例えばこのように指定する。

 

@font-faceで設定したフォントを使うには、フォント名を指定するだけでいい（今までと同じ）。フォントがどこ由来か（ローカルかWebか）は気にしないわけだ。

 

AndroidローカルのNoto Sans Japaneseを使う

さて、@font-faceを使えば、必要に応じてローカルフォントとWebフォントを切り替えられそうなことがわかった。

Android Marshmallowへは、NotoSansJP-Regular.otfという名前でNoto Sans Japaneseがインストールされているから、これを先ほどのlocalに指定する。

※urlには、@importで指定した http://fonts.googleapis.com/earlyaccess/notosansjapanese.css に書いてあるフォントファイルのURLを指定する。

これはweightが400の場合の指定だから、他のウェイトに対応するには必要なウェイト分だけこの設定を記述すればいい。しかしながら、Android MarshmallowにはRegularのNoto Sans Japaneseしかインストールされていないから、他のウェイトについてはWebフォントを使うよう設定する。

全ウェイトに対応した設定はこちら。

 

Webフォントの軽量化・高速化について

Noto Sansの日本語版は、日・中・台・韓のフォントと一緒くたになってNoto Sans CJKとして配信されていて、10MBという超容量のファイルサイズになってしまっていた。

この超サイズのせいで、そのままWebフォントとして使うとページ読み込みに大きな悪影響を与えていた。

そこで、Noto Sans CJKを一旦ダウンロードし、日本で一般的に使われている文字に絞って大幅に文字を削り、サイトからユーザーの環境へ配信する方法が取られた。サブセットフォントメーカーやWOFFコンバータを使う方法がそれだ。

ところが今は各言語で分割されているからそこまでしなくていい。日中台韓のうち、日本語のサブセットがNoto Sans Japaneseというわけだ。

各ウェイトごとにNoto Sans CJKを軽量化して、サイトにアップして、フォントに更新があればやり直しという骨なことゝはサヨウナラ。

ただ、分割されたとはいえ、欧文フォントに比べてサイズが大きいのは事実。「性能をもっと！もっと！」なプロジェクトではこちらからフォントファイルをダウンロードして、自前で軽量化し、サーバーにアップしてWebフォントとして使おう。

Noto Sans CJK JP | Google Noto Fonts

 

Noto Sans JapaneseとNoto Sans JPの違い

Google Fonts Early Accessを見てもう一つの和文Noto Sansに気づいた人がいるかもしれない。その名は『Noto Sans JP』

それぞれのフォントの説明を読むと、Noto Sans JapaneseはJIS X 0208という漢字集合についての工業規格に含まれる漢字と、漢字以外の文字を含んでいる。

それに対してNoto Sans JPは、JIS X 0208に加えてShift_JISに含まれる文字も含んでいる。

実際、Noto Sans JPの方がNoto Sans Japaneseよりも収録文字数が僅かに多い（その分わずかにサイズが大きい）。その他にも、Noto Sans JPはDemiLightという文字の太さが削られていたりする。サイズがあまり変わらなくて対応文字数が多いならJPの方がいいかなと思うけれど、皆さんはどうでしょうか？

 

タイポグラフィについて学ぶにはこちらがおすすめ。ハンドブックサイズで持ち運びやすいです。