視認性抜群のWebフォント「Noto Sans JP」を導入する方法

癖がなく視認性の良いWebフォントの1つに「Noto Sans JP」があります。

使用しているフォントがしっくりこないときに、「Noto Sans JP」を導入してみてはいかがでしょうか。

この記事を読んでわかること:
Webフォント「Noto Sans JP」の導入方法

Noto Sana JPとは

GoogleとAdobeが共同開発したWebフォントであり、オープンソースなので無料で使用することができます。

シンプルながら、しっかりと文字を認識できるので、大変おすすめできるフォントでもあります。

また、Webフォントの導入メリットとして、パソコン環境に依存することがないので、どの媒体からブログにアクセスしても、同じフォントで表示してくれるでしょう。

WindowsやMacのOS違いによるサイトの表示違いを気にする必要がなくなる、というのは非常に便利ではないでしょうか。

それでは、2種類の導入方法について見ていきます。

Google FontsでWebフォントのコードを取得

1.下記URLから、Google Fontsのページにアクセスします。

Noto Sans JP – Google Fonts

2.赤枠で囲んだ「SELECT THIS FONT」をクリックします。

3.画面下側に「Family Selected」と表示されるようになるので選択してください。

4.「CUSTOMIZE」をクリックしてフォントの設定を行います。

・Noto Sans JP
regular 400 にチェック
bold 700にチェック

文字の太さに関しては、この2種類があれば十分でしょう。お好みでカスタマイズしてください。

・Languages
Japaneseにチェック

その後「EMBED」をクリックするとコードが生成されています。

この生成されたコードをブロブに差し込んでいく必要があります。

<HEAD>~</HEAD>内に差し込む

「EMBED」→「STANDARD」の「<link href ~ 」から始まるコードをコピーしてください。

<link href=”https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&amp;subset=japanese” rel=”stylesheet”>

これを、運用しているブログの「<HEAD>~</HEAD>」に書き込みます。アナリティクスやGoogle Adsenseのコードを埋め込んだ場所でOK。

「<HEAD>~</HEAD>」の場所はWordPressテーマによって異なるので、都度さがしてください。

場所がわからないという方は、WordPressの管理画面から、HEAD内に追記できるようになるプラグインを導入する方法もあります。

style.cssファイルに差し込む

続いて「style.css」に記入する方法です。

「EMBED」→「@IMPORT」を選択してください。

@importから始まるコードをコピーします。

@import url(‘https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&subset=japanese’);

これを、お使いのワードプレスの「style.css」に記入します。

font-familyでWebフォントを指定する

最後に、記入したフォントをブログに反映させるためにfont-familyを設定します。

「style.css」に、下記を記入してください。

body {
font-family: ‘Noto Sans JP’, sans-serif;
}

また、WordPressの「追加CSS」に記入しても反映されます。

   

これで、設定が完了しました。

Webフォントのデメリット

ものすごく便利なWebフォントですが、1つだけ弱点があります。

フォントデータをWebから読み出してきているので、その分サイトの表示速度が遅くなるというデメリットが存在します。

こればっかりは、実際に導入してみて、表示速度が許容範囲内にあるかどうかを判断しないといけないでしょう。

まとめ

Webフォント「Noto Sans JP」の導入方法を紹介してきました。

どこまで表示速度を許容できるかが、使用するかの判断基準になりそうです。

良いフォントだけに非常に惜しいですね。

ただ、視認性という点においては、レベルの高いフォントではないでしょうか。

気になった方はぜひチェックしてみてくださいね。

<使用しているサーバー>
MixHost-レンタルサーバー
<使用しているドメイン>
エックスドメイン-ドメイン

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でtwo_audioをフォローしよう!