日本語Webフォント「Noto Sans Japanese」の使い方

noto-sans-japanese-thumbnail

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

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

Noto Sans Japanese

Noto Sans Japanese

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

参考Noto Sans Japanese

まこと先生
Webフォントってよく聞きますけど、普通のフォントとは違うのですか?
Google ChromeとかIEとかブラウザの種類によって表示されるフォントが変わることってありませんか?
やまかわ
まこと先生
あぁ、ありますね!IEだとすごく細くなったりして読みにくかったりします
そうですね。通常のフォントというのは、閲覧しているデバイスにインストールされているフォントしか表示できないので、見る人・見る環境によってフォントが変わっちゃうんです
やまかわ
まこと先生
それは困りますね。せっかくおしゃれなブログを作っても人によってはそう見えないわけですね?
Webフォントというのはそうならないよう、フォントデータをサーバー上のファイルから読み込んで、誰がどんなブラウザで見ても同じフォントで表示できるようにするというものです
やまかわ
まこと先生
なるほど、ブラウザごとの対応をしなくて済むのがWebフォントのメリットですね!私も導入しよっと👍

「Noto Sans Japanese」導入の手順

導入するには以下の手順でカスタマイズをおこないます。

  1. ヘッダーでスタイルシートを読み込む
  2. CSSにプロパティーを追加する

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

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

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

これで外部サイトから「Noto Sans Japanese」のデータを読み込みます。

2.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」の導入はこれだけです。

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

英字もWebフォントに変更するには

「Noto Sans Japanese」は日本語フォントです。
英字には反映されないため、別のフォントを指定する必要があります。

おすすめは「Google Web Fonts」というWebフォントです。

導入方法はこちらをご覧ください。

google-web-fonts-thumbnail
以前、「Noto Sans Japanese」というWebフォントを紹介しました。 https://lognote.biz/noto-

コメント

  1. haruboshi より:

    全く反映されません。

    • 山川 達也 より:

      >> haruboshi様

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

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

      font-family: “Noto Sans Japanese”, sans-serif !important;

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

コメントを残す

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

承認制のため反映にお時間をいただきます。