Googleの無料Webフォント「Noto Fonts」を試す

2016/12/13 サイト制作, 技術系 投稿者:竹内

img_notofonts02

今まで何度か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

使ってみて良かった点、悪かった点

img_notofonts03

良かった点

  • 使い勝手が良い
  • エイリアスがかかっていて見た目がキレイ
  • 個人的に游ゴシック体よりも好み

悪かった点

  • フォントデータサイズが大きいのでは?と感じる
  • 特にスマホでのパケット量やダウンロード(表示)までの時間がかかる
  • 明朝体が無い

まとめ

最近はWebフォントもかなり使いやすくなって、デバイス間での表示に差異が無くなることは大変喜ばしいことです。
しかし、スマホ表示において、「0.1秒でも早く!」が求められている昨今、見た目のためにデータ転送量や時間を使うのはいかがなものかと個人的には感じましたし、実際2回目以降キャッシュが効いてしまえば表示スピードも気になりませんが、初回表示にはワンテンポ遅れるような状態になります。

また、スマホ表示でのフォントの大きな問題として「Android端末では明朝体が使えない」ことがあげられます。
こちらを解決する手段としてWebフォントには期待したいところです。
(とは言いますが、Android端末が明朝体に対応すれば良いだけの話だと思います。)

と、Webフォントについて、今回を含め何度か試してはみたのですが、私個人としてはあまりしっくり来ないというか積極的に使っていこうという気になっていません。
「游ゴシック体」「游明朝体」のような、Webフォントよりも手軽な(と言うか従来通りの使い方の)共通フォントも出ていますので、正直なところ「Webフォントを使っていこうぜ!」な流れにはならないのではないかなと思いますが、いかがでしょうか?

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)