【Webフォント】Noto Sans Japaneseの導入する!【使い方】

便利ツール

こちらの記事でfont-familyとしてご紹介した
Noto Sans Japanese
ですが、こちらのフォントは、

あのGoogleとAdobeが共同で開発したフォントということで、
世界中のあらゆる言語に対応することを目標に開発されているものだそう。

コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□)、通称”豆腐”[2]が表示されることが多い[3]が、すべての言語に対応したフォントを開発することで”豆腐”が現れることがなくなるようにという意味を込めてNoto(no more tofu)という名称が付けられた

参照:https://ja.wikipedia.org/wiki/Noto

「Noto」の由来は上記のようですが、
日本語の豆腐がもとになっていることに驚きですね。
豆腐って外国人みんな知ってんのか・・・

非常にきれいで、見やすいフォントなので、
個人的に大好きです。

また、オープンソースなので、
普通にWeb上で使う分にはだれでも、無料に使用することができます。

このNoto Sans Japaneseですが、
Webフォントなので使用する場合は、
簡単ではありますが、ひと手間あります。

今回はNoto Sans Japaneseの導入方法です!

Webフォント『Roboto』を導入する場合はこちら
【Webフォント】 Android の欧文デフォルトフォントとなっているRobotoを導入する!

Webフォントがうまく表示されない方は
こちらを参照ください。
【Webフォント】Webフォントがうまく適用されない場合の対処法【表示されない】

スポンサーリンク

Noto Sans Japaneseを使う!

Noto Sans Japaneseを導入する方法は、
2通りあります。

ひとつはStyle.cssのファイルから読み込む方法。
もうひとつは、header.phpのファイルから読み込む方法です。
どちらか片方の方法で読み込んでください。

style.cssファイルから読み込む方法

スタイルシートから読み込む場合は、
以下のコードをstyle.css内に追記してください。

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

header.phpのファイルから読み込む方法

ヘッダーのファイルから読み込む場合は、
以下のコードをheader.phpにある<head>~</head>の間に追記してください。

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

font-familyで設定する!

style.css又はheader.phpでコードを追記したら、
font-familyを設定しましょう。

全体に適用させてい場合は、
style.cssにおいて、
以下の様に追記します。

body{
font-family: "Noto Sans Japanese", sans-serif;
}

実際には、他のフォントも記述しますが、
わかりやすくNoto Sans Japaneseのみ記述しています。

これで設定がされたはずです。

フォントは人それぞれ好みがありますが、
Noto Sans Japaneseはくせもなく、
多くの方に気に入ってもらえるフォントだと思います。

Webフォントであるため、
読み込むプロセスがある分、
サイトの表示スピードにも少なからず影響はありますが、
手軽に文章を見やすくするためにはとても良いツールだと思います。

Webフォント『Roboto』を導入する場合はこちら
【Webフォント】 Android の欧文デフォルトフォントとなっているRobotoを導入する!

Webフォントがうまく表示されない方は
こちらを参照ください。
【Webフォント】Webフォントがうまく適用されない場合の対処法【表示されない】

コメント