こちらの記事でfont-familyとしてご紹介したNoto Sans Japaneseですが、こちらのフォントは、あのGoogleとAdobeが共同で開発したフォントということで、世界中のあらゆる言語に対応することを目標に開発されているものだそう。
コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□)、通称”豆腐”が表示されることが多いが、すべての言語に対応したフォントを開発することで”豆腐”が現れることがなくなるようにという意味を込めてNoto(no more tofu)という名称が付けられた
引用：Wikipedia-Noto
「Noto」の由来は上記のようですが、
日本語の豆腐がもとになっていることに驚きですね。
豆腐って外国人みんな知ってんのか・・・
非常にきれいで、見やすいフォントなので、
個人的に大好きです。
また、オープンソースなので、
普通にWeb上で使う分にはだれでも、無料に使用することができます。
このNoto Sans Japaneseですが、
Webフォントなので使用する場合は、
簡単ではありますが、ひと手間あります。
今回はNoto Sans Japaneseの導入方法です！
Webフォント『Roboto』を導入する場合はこちら
【Webフォント】 Android の欧文デフォルトフォントとなっているRobotoを導入する！
Webフォントがうまく表示されない方は
こちらを参照ください。
【Webフォント】Webフォントがうまく適用されない場合の対処法【表示されない】
Noto Sans Japaneseは早期アクセス版です。
Noto Sans Japaneseの最新バージョンを利用する場合は、以下の「Noto Sans JP」の記事をご参考ください！
- 国内シェアNo.1の高速サーバーなのでストレスフリー！
- 自動バックアップ機能に標準対応で安心運用可能！
| 気になるポイント！ | キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！ |
|---|
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フォントがうまく適用されない場合の対処法【表示されない】
Noto Sans Japaneseは早期アクセス版です。
Noto Sans Japaneseの最新バージョンを利用する場合は、以下の「Noto Sans JP」の記事をご参考ください！
コメント