いままでもGoogle fontsは「Google Fonts + 日本語早期アクセス」として日本語WEBフォントを無料で提供していましたが、今回正式に8種類の日本語WEBフォントがリリースされたようです。
ホームページ制作においてフォントの指定(font-family)は頭の痛い問題です。
なにしろOSその他の環境によってインストールされているフォントには違いがあり、また、ブラウザによっても微妙に表示に違いが出るなど、一筋縄ではいきません。
極力環境に左右されないようなフォント指定を行うのですが、ローカル環境頼みの指定には限界があるのもまた事実。
ちなみに真夜中WEBでは下記のように指定していますが、果たして最善と言えるのかどうか
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ,'游ゴシック Medium', 'MS PGothic', arial, helvetica, sans-serif;
WEBフォントであれば少なくとも「OSその他の環境によってインストールされているフォント」による差異はなくなることを考えると、この日本語WEBフォントのリリースを期にそろそろWEBフォントの使用に踏み切ってもいいのかもしれないと思い、8種類すべてを試してみようと思います。
まずGoogle fontsの日本語フォントのページにアクセスし、8種類ある日本語フォントの中から使用したいフォントの右上にある「+」をクリックします。
ここではNoto Sans JP を例として説明します。
するとフォント読み込みのためのコードとCSSの表記コードが表示されるので、読み込みのためのコード
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
をhtmlファイルのheadタグ内に、
当該フォントを使用したい要素にCSSの表記コード
font-family: 'Noto Sans JP', sans-serif;
を指定する。(後ろのsans-serifは滑り止めみたいなもんです)
これだけです。
各フォントの表示は以下の通り
Noto Sans JP
1234567890 abcdefg
鳥はみんなで今夜まし先生のときいつをあるたようにな赤顔をゴーシュをひるがみんなか落ち方がこりて来ましまし。
Noto Serif JP
1234567890 abcdefg
鳥はみんなで今夜まし先生のときいつをあるたようにな赤顔をゴーシュをひるがみんなか落ち方がこりて来ましまし。
M PLUS 1p
1234567890 abcdefg
鳥はみんなで今夜まし先生のときいつをあるたようにな赤顔をゴーシュをひるがみんなか落ち方がこりて来ましまし。
Sawarabi Mincho
1234567890 abcdefg
鳥はみんなで今夜まし先生のときいつをあるたようにな赤顔をゴーシュをひるがみんなか落ち方がこりて来ましまし。
M PLUS Rounded 1c
1234567890 abcdefg
鳥はみんなで今夜まし先生のときいつをあるたようにな赤顔をゴーシュをひるがみんなか落ち方がこりて来ましまし。
Kosugi Maru
1234567890 abcdefg
鳥はみんなで今夜まし先生のときいつをあるたようにな赤顔をゴーシュをひるがみんなか落ち方がこりて来ましまし。
Sawarabi Gothic
1234567890 abcdefg
鳥はみんなで今夜まし先生のときいつをあるたようにな赤顔をゴーシュをひるがみんなか落ち方がこりて来ましまし。
Kosugi
1234567890 abcdefg
鳥はみんなで今夜まし先生のときいつをあるたようにな赤顔をゴーシュをひるがみんなか落ち方がこりて来ましまし。