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

DNSサーバーを切り替える前に切り替えた後の表示を確認する方法

理由は様々ですが、既存のホームページをまるごと他のサーバーに移転したいとのご依頼を承ることがあります。 通常の静的なサイトの移転でドメインが変わらない場合には基本的にサーバーに置いてあるフォルダ・ファイル群を古いサーバー…続きを読む

CSSだけで実装できる! スクロールした時に画像以外のコンテンツを挟んで背景画像を切り替える方法

タイトルを読んだだけではイマイチ分かりにくいので、下記デモページをご覧ください。 デモページを見る ご確認いただけましたか?そうです、よく見かけるやつです。 ※ただこの方法、ものすごく簡単なんですがスマートフォン(多分タ…続きを読む

画像をグループでソート、クリックでライトボックス表示し、かつjquery3.xに対応させる

サイト内で複数の画像をまとめて表示するときに項目でソートできるjqueryのプラグイン「Shuffle.js」。 まずはデモページをご覧ください Shuffle.jsCategorize, sort, and filte…続きを読む

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

typography

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

よく使うワードプレスのphp関数スニペット。随時追加

しょっちゅう使うわけではないけれど、ワードプレスを使うサイトが多くなってきたことに伴い使う頻度は増えてきたワードプレスの関数をその都度調べて記述するのもめんどくさくなってきたのでまとめてみました。 ● まずは、htmlフ…続きを読む

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

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