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

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

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

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

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

OSやブラウザで表示に違いが出てしまう絵文字を絵文字フォントで代替する

ブログの記事などで絵文字を使いたいなという場面がありますが、絵文字はOSやブラウザなどの環境によって表現に違いがあったりなどはまだいい方で、最悪表示されないことも想定しなければならないのが困るところです。&#x1F617…続きを読む

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

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

もっともっとモックアップを活用しよう 1

candle-mock-up

Mockup(モックアップ ※模型の意)とはデザインなどの現場で使われる手法の一つで、作成過程で完成イメージをビジュアル的に確認するために使われるもので、プレゼンテーションやブランディングイメージ作成シーンに欠かせないも…続きを読む

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

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