美しすぎる日本語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様

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

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

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

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

1 2

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

日本語が含まれない投稿は無視されます。(スパム対策)