Google Fontsが日本語フォントを正式サポート開始

2018/10/30 サイト制作 投稿者:前原

Google Fontsの日本語フォントは試用版として2016年から提供されていましたが、2018年9月から正式サポートが開始しました。

WEBフォントとは?

本来フォントは閲覧者側の環境によって、表示されるフォントが変わりますが、WEBフォントはどの環境でも同じフォントで表示できるので、サイトの印象が変わるということがありません。

デメリットはフォントデータを読み込むため、表示が遅くなるということです。
特に日本語の漢字は数が多くデータ量が多くなるため、閲覧者に負担をかけないよう使いすぎには注意しましょう。
また、対応していない漢字もありますので、あまり使われていない漢字などを使う際はお気を付けください。

WEBフォントのメリット・デメリットなどは、以前の記事で詳しく触れていますのでそちらもご覧ください。→「そろそろ行けるか?Webフォント」

Noto Fontsの由来などについてはこちら。→「Googleの無料Webフォント「Noto Fonts」を試す」

Google Fontsの日本語フォント一覧 (2018年10月現在)

・Noto Sans JP (font-weight: 6種類)
・Noto Serif JP (font-weight: 7種類)
・M PLUS 1p (font-weight: 7種類)
・M PLUS Rounded 1c (font-weight: 7種類)
・Sawarabi Mincho (font-weight: 1種類)
・Sawarabi Gothic (font-weight: 1種類)
・Kosugi (font-weight: 1種類)
・Kosugi Maru (font-weight: 1種類)

以上となっています。
商用利用が可能で、無料なので手軽に使えます。

使い方

Google Fonts公式サイトにアクセスします。
Google Fonts公式サイト

右の検索メニューの「Languages」から「Japanese」が選択できます。
フォントにマウスを載せると文字の太さ・サイズなどを試せるメニューが出てきます。
その下がテキストエリアになっていて、お好きな文字でフォントを試すことが出来ます。

使用したいフォントが決まったら、フォント右上の「+」ボタンをクリックします。
画面下の選択欄にフォントが追加されます。

選択欄の右上の「-」ボタンをクリックすると下にメニューが出てきます。



「CUSTOMIZE」タブでは文字の太さや斜体の選択が出来ます。
選択した数だけデータが重くなりますので使うものだけ選択しましょう。

フォントデータの読み込み

HTML側で読み込む場合

「EMBED」タブの「Embed Font」の「STANDARD」をクリック、生成されたコードをHTMLのhead内にコピペしてください。

例:noto sans jpの場合

CSS側で読み込む場合

「EMBED」タブの「Embed Font」の「@IMPORT」をクリック、生成されたコードをCSSの最初のほうにコピペしてください。

例:noto sans jpの場合

CSSでフォントの指定

「Specify in CSS」で生成されたコードを、CSSでフォントを使いたいプロパティに指定します。

例:noto sans jpの場合

これだけでWEBフォントが表示されます。

まとめ

今まではフォント数が少なかったり、試用版で表示が遅いなどの理由からそこまで頻繁に使えませんでしたが、徐々にフォント数も増えており、今回の正式版に伴い表示速度も速くなりました。
サイトに合ったフォントがありましたら是非使わせて頂きたいと思います。

また、現在は試用版として提供されている他の日本語フォントもありますのでこちらもチェックしてみてください。
Google Fonts + 日本語 早期アクセス
https://googlefonts.github.io/japanese/

Windows 7 の延長サポート終了まで

days
4
2
2
hours
1
0
minutes
4
7
seconds
4
8

Office 2010 の延長サポート終了まで

days
6
9
5
hours
1
0
minutes
4
7
seconds
4
8

カレンダー

   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  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 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
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   
       
     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(エニューム)