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

noto-sans-japanese-thumbnail

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

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

「Noto Sans Japanese」は、Googleが配布している無料のWebフォント。

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

参考Noto Sans Japanese

「Noto Sans Japanese」導入方法

導入するには、少しだけブログをカスタマイズしないといけません。

ヘッダーでスタイルシートを読み込む

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

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

CSSにプロパティーを追加する

反映させたいセレクタにフォントプロパティを追加します。

やまかわ
セレクタがよくわからない方は、*(アスタリスク)に追加すればブログ全体のフォントに反映されます
* {
font-family: "Noto Sans Japanese";
}

全体のpにだけ反映させたいときは、このように記述します。

段落(p)にのみ反映

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

pの部分の入れ替えで、

リスト(ul)にのみ反映

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

テーブル(table)にのみ反映

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

なんていうこともできます。

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

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

おすすめ関連書籍

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

Twitterで

コメント

  1. haruboshi より:

    全く反映されません。

    • 山川 達也 より:

      >> haruboshi様

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

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

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

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