美しすぎる日本語Webフォント「Noto Sans Japanese」の導入方法

noto-sans-japanese-thumbnail

Webフォント「Noto Sans Japanese」の導入方法を紹介します。

「Noto Sans Japanese」ってどんなフォント?

「Noto Sans Japanese」は、Googleが配布している無料のWebフォントで、誰でも自由に使うことができるWebフォントです。

Webフォントはまだまだ英語フォントが多い印象ですが、「Noto Sans Japanese」は名前の通り日本語にも対応しています。

参考Noto Sans Japanese

「Noto Sans Japanese」導入方法

導入するには少しだけブログをカスタマイズしないといけませんが、以下の手順通りに進めていただければ簡単です。

まず、以下のコードをヘッダーの<head></head>の間に貼り付けます。

<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />

反映させたいセレクタにフォントプロパティを追加します。とりあえず、*(アスタリスク)に追加しておけばブログ全体のフォントに反映されます。

* {
font-family: "Noto Sans Japanese";
}

全体のpにだけ反映させたいなら、このように記述してください。

* p {
font-family: "Noto Sans Japanese";
}

pの部分適宜入れ替えればそのセレクタにだけ反映されるようになります。

「Noto Sans Japanese」の導入はこれだけです。

キャッシュプラグインなどを入れているとすぐに反映されない場合がありますので、その場合はキャッシュ削除をおこなってからブラウザを更新してみてください。

Webフォント関連書籍

noto-sans-japanese-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメント

  1. haruboshi より:

    全く反映されません。

    • 山川 達也 より:

      >> haruboshi様

      キャッシュの削除は試されましたでしょうか。

      それでも反映されないようでしたら、!importantを使って、

      body { font-family: ‘Noto Sans Japanese’, sans-serif !important; }

      このようにしてみてください。