Google日本語Webフォント Noto Sans Japanese を使う！

GoogleがWebフォントを提供していることは知っていたのですが今さらながら日本語フォントを提供していたことを知り早速入れてみたくなりました。
日本語のWebフォントは有料の物が多く、なかなか導入するのに躊躇してしまいますがそこは天下のgoogle様！無料ならばいつ使うの？「今でしょ！」ということで使ってみたいと思います。

Webフォントとは？

Webフォントを使うことでブラウザ上で任意のフォントを表示させることができます。
もう少し分かりやすく説明すると、これまではCSSでfont-familyを指定してもユーザーの環境にそのフォントがインストールされていない場合、制作者側が意図したフォントが表示されないという問題がありました。Webフォントを使うことでユーザー環境に依存せずにどんなフォントでも表示することができます。

Webフォントのメリット・デメリット

そんな最高に思えるWebフォントですが必ずしも良いことばかりではありません。
Webフォント導入のメリット・デメリットを挙げてみますと・・

メリット

もちろん先に述べたようにユーザー環境に依存せずにフォントが表示できる他に、通常のフォントにはないようなお洒落なフォントがたくさんあります。Webフォントを入れることでサイトがグッとお洒落になる事、間違い無し！

デメリット

その反面、有料のWebフォントを利用する場合は費用がかかりますし、サーバー上のフォントファイルを読み込むため、特に日本語フォントだと読み込みに時間がかかる場合があります。

日本語Webフォント Noto Sans Japanese を使ってみる

さて前置きが長くなりましたが、Webフォントについて一通りご紹介したところで早速、当サイトContentsBeatにも Noto Sans Japanese を入れてみたいと思います。

使い方はとても簡単で、googleが提供しているCSSファイルを@importで読み込みます。

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

styleタグで直接読み込む方法もあり、HTMLの〜内で以下のコードを書きます。

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

あとはCSSでNoto Sans Japaneseを適用させたい箇所にfont-familyを指定するだけで完了！下記、サンプルではbody全体にNoto Sans Japaneseを適用しています。

<style>
body {
  font-family: 'Noto Sans Japanese', sans-serif;
}
</style>

はい！設定はこれで完了です！とてもかんたんですね！

Noto Sans Japaneseを鑑賞

当サイトにも入れてみたのですが、正直どう変わったのか私もよくわかりません（汗）
そこでWindowsやmacでよく使われている他のフォントと比較してみましょう。

どうでしょうか？更に「Noto Sans Japanese」はfont-weightも同時に指定が可能です。

.noto100 {font-weight:100;}　 やり遂げたよ・・・最後まで！！
.noto200 {font-weight:200;}　やり遂げたよ・・・最後まで！！
.noto300 {font-weight:300;}　やり遂げたよ・・・最後まで！！
.noto400 {font-weight:400;}　やり遂げたよ・・・最後まで！！
.noto500 {font-weight:500;}　やり遂げたよ・・・最後まで！！
.noto600 {font-weight:600;}　やり遂げたよ・・・最後まで！！
.noto700 {font-weight:700;}　やり遂げたよ・・・最後まで！！
.noto800 {font-weight:800;}　やり遂げたよ・・・最後まで！！
.noto900 {font-weight:900;}　やり遂げたよ・・・最後まで！！

まとめ

いかがでしたか？Webフォントは回線速度などによっては表示速度が遅くなってしまうなどの問題もありますが、それ以上に魅力的な部分もたくさんありますので、導入の際は自分のサイトに入れる必要があるかどうか良く検討した上で使用するのがベストだと思います。