今まで何度かWebフォントについて紹介してきましたが、最近Googleの「Noto Fonts」なるものが良いらしいとのことですので、早速試してみたいと思います。
世界中の言語が用意されているフォントファミリーですが、今回はもちろん日本語を試してみます。
Webフォントのメリット・デメリットについては以前の記事で紹介しましたので省略します。
「Noto Fonts」とは?
GoogleとAdobeによって共同開発されたフォントで、改変や再配布も出来るApache Licenseでの提供とのことです。もちろん商用利用も可能です。
Noto Fontsという名前の由来は「no more tofu(もう豆腐はいらないよ)」から来ているらしく、Webサイト上で指定したフォントが表示できない場合に四角の記号のようなものが表示されることがあり、それを「tofu(豆腐)」と呼んでいることからだそうです。面白いですね。
早速使ってみよう
HTMLの記述でGoogleのサーバーから直接ブラウザーへフォントデータをダウンロードする方法と、Webサーバーへフォントデータをアップロードしてサーバー内で完結させる方法の2パターンがありますが、今回はいつも通り後者の方法で試してみます。
公式サイトからフォントデータをダウンロード
まずはNoto Fonts公式サイトに行ってみます。
前述の通り今回はフォントデータをダウンロードします。
色々な言語のものがありますが、日本語は「Noto Sans CJK JP」、115.5MBのデータサイズで、ダウンロードして展開すると141MBありました。漢字が多いのでそこそこのデータサイズになっています。(フォントの太さによって7ファイルありますのでその影響もあります。)
フォントデータをアップロードし、CSSへフォントの指定
フォントデータは「common/fonts/」へ配置し、CSSでフォントの指定を行います。7つの太さのうち、「Regular」を指定してみました。
HTMLは特に指定はありません。今回の文章は上で記述している『「Noto Fonts」とは?』の部分のテキストをそのまま使用します。
CSS
1 2 3 4 5 6 7 8 9 |
@font-face { font-family: "Noto Sans Japanese"; src: url("../fonts/NotoSansCJKjp-Regular.otf"); } body { font-family: 'Noto Sans Japanese', sans-serif; font-size: 20px; } |
使ってみて良かった点、悪かった点
良かった点
- 使い勝手が良い
- エイリアスがかかっていて見た目がキレイ
- 個人的に游ゴシック体よりも好み
悪かった点
- フォントデータサイズが大きいのでは?と感じる
- 特にスマホでのパケット量やダウンロード(表示)までの時間がかかる
- 明朝体が無い
まとめ
最近はWebフォントもかなり使いやすくなって、デバイス間での表示に差異が無くなることは大変喜ばしいことです。
しかし、スマホ表示において、「0.1秒でも早く!」が求められている昨今、見た目のためにデータ転送量や時間を使うのはいかがなものかと個人的には感じましたし、実際2回目以降キャッシュが効いてしまえば表示スピードも気になりませんが、初回表示にはワンテンポ遅れるような状態になります。
また、スマホ表示でのフォントの大きな問題として「Android端末では明朝体が使えない」ことがあげられます。
こちらを解決する手段としてWebフォントには期待したいところです。
(とは言いますが、Android端末が明朝体に対応すれば良いだけの話だと思います。)
と、Webフォントについて、今回を含め何度か試してはみたのですが、私個人としてはあまりしっくり来ないというか積極的に使っていこうという気になっていません。
「游ゴシック体」「游明朝体」のような、Webフォントよりも手軽な(と言うか従来通りの使い方の)共通フォントも出ていますので、正直なところ「Webフォントを使っていこうぜ!」な流れにはならないのではないかなと思いますが、いかがでしょうか?