ホームページ制作の札幌真夜中WEBのトップページです 全国からご依頼承ります。

Google fontsで日本語Webフォントの正式版がリリースされたらしいので試してみた

  • 2018.10.01
  • web
Google fontsで日本語Webフォントの正式版がリリースされたらしいので試してみた

いままでも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
鳥はみんなで今夜まし先生のときいつをあるたようにな赤顔をゴーシュをひるがみんなか落ち方がこりて来ましまし。

webカテゴリの最新記事