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の場合
1 |
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet"> |
CSS側で読み込む場合
「EMBED」タブの「Embed Font」の「@IMPORT」をクリック、生成されたコードをCSSの最初のほうにコピペしてください。
例:noto sans jpの場合
1 |
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP'); |
CSSでフォントの指定
「Specify in CSS」で生成されたコードを、CSSでフォントを使いたいプロパティに指定します。
例:noto sans jpの場合
1 |
font-family: 'Noto Sans JP', sans-serif; |
これだけでWEBフォントが表示されます。
まとめ
今まではフォント数が少なかったり、試用版で表示が遅いなどの理由からそこまで頻繁に使えませんでしたが、徐々にフォント数も増えており、今回の正式版に伴い表示速度も速くなりました。
サイトに合ったフォントがありましたら是非使わせて頂きたいと思います。
また、現在は試用版として提供されている他の日本語フォントもありますのでこちらもチェックしてみてください。
Google Fonts + 日本語 早期アクセス
https://googlefonts.github.io/japanese/