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

typography

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

Atom vs VSCode vs Brackets、もっとも使いやすいエディタはこれだ!…といいな

typewriter

真夜中WEBではWYSIWYGエディタを使用せず、テキストエディタを使ってホームページ制作を行っております。 具体的にはWindowsでは「サクラエディタ」を、Macでは「mi」を使用しているんですが、OSごとにエディタ…続きを読む

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

typography

いままでもGoogle fontsは「Google Fonts + 日本語早期アクセス」として日本語WEBフォントを無料で提供していましたが、今回正式に8種類の日本語WEBフォントがリリースされたようです。 Google…続きを読む

facerigや3teneで動かせるようにLive2Dでモーションをつける

デモのため真夜中WEBのマスコットキャラクターを制作してみました。 制作の流れは以下のようになります。 ① ペイント系ソフトでキャラクターのイラストを制作して画像エクスポートする。 ② 画像編集ソフトで画像をインポートし…続きを読む

プラグインに頼らないでワードプレスを移転する。ドメイン変更対応

最近はサイト内にワードプレスが設置されている、またはサイト自体がワードプレスでできている、ということが多くなってきました。 それに伴って、当然のことながらサイトを設置しているサーバーの移転にはワードプレスの移転も含まれる…続きを読む

Open Street MapはGoogle Mapの代替案となりえるのか

2018年7月16日よりgooglemapの仕様変更に伴ってgooglemapAPIを使って呼び出している地図(カスタマイズを施しているものを含む)を表示するにはAPIキーとお支払い情報の設定が必須となりました。 このこ…続きを読む

2018年html5最小テンプレートとよく使うhtmlスニペット

htmlコーディングの骨組みとなるhtml5のテンプレートとコーディングを行う上でよく使うスニペットをまとめました。真夜中WEBではご依頼内容に合わせた手打ちのコーディングを行っておりますので備忘録の意味合いもあります。…続きを読む