日本語Webフォント「Noto Sans Japanese」の使い方
Webフォント「Noto Sans Japanese」の導入方法を紹介します。
「Noto Sans Japanese」は、Googleが配布している無料のWebフォント。
Noto Sans Japanese
Webフォントは英語フォントが多い印象ですが、「Noto Sans Japanese」は名前の通り日本語に対応しています。
まこと先生Webフォントってよく聞きますけど、普通のフォントとは違うのですか？
Google ChromeとかIEとかブラウザの種類によって表示されるフォントが変わることってありませんか？
やまかわまこと先生あぁ、ありますね！IEだとすごく細くなったりして読みにくかったりします
そうですね。通常のフォントというのは、閲覧しているデバイスにインストールされているフォントしか表示できないので、見る人・見る環境によってフォントが変わっちゃうんです
やまかわまこと先生それは困りますね。せっかくおしゃれなブログを作っても人によってはそう見えないわけですね？
Webフォントというのはそうならないよう、フォントデータをサーバー上のファイルから読み込んで、誰がどんなブラウザで見ても同じフォントで表示できるようにするというものです
やまかわまこと先生なるほど、ブラウザごとの対応をしなくて済むのがWebフォントのメリットですね！私も導入しよっと👍
「Noto Sans Japanese」導入の手順
導入するには以下の手順でカスタマイズをおこないます。
- ヘッダーでスタイルシートを読み込む
- CSSにプロパティーを追加する
１．ヘッダーでスタイルシートを読み込む
まず、以下のコードをヘッダーの<head></head>の間に貼り付けます。
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
これで外部サイトから「Noto Sans Japanese」のデータを読み込みます。
２．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フォントです。
導入方法はこちらをご覧ください。
以前、「Noto Sans Japanese」というWebフォントを紹介しました。
https://lognote.biz/noto-
コメント
全く反映されません。
>> haruboshi様
キャッシュの削除は試されましたでしょうか。
それでも反映されないようでしたら、!importantを使って、
font-family: “Noto Sans Japanese”, sans-serif !important;
このようにしてみてください。