Googleが配布している軽量のWEBフォントを使ってサイトの見栄えを良くしよう！

突然ですが、WEBフォントってご存じですか？

WEBフォントというのは、自分のブログやサイトに、任意のフォントをインストールして適応することが出来るフォントのことで、WEBフォントを利用すれば、文字の可読性が上がったり、サイトのデザインを引き締める事も出来ます。

実は、基本的にはどのようなフォントであってもサーバーにフォントデータさえアップすればWEBフォントとして使用できるのですが、フォントによってはライセンスが必要だったり、そもそもフォントのデータが重すぎて読み込みが遅くなってしまったりするため、現実的ではありません。

WEBフォントを使用する際には、必ずWEBフォント用の軽量データを使用した方が良いのです。

そうなると少し敷居が高くなったように思われるかも知れませんが、実はGoogleが公式でWEBフォントを配布しているんですよ。

それがこちらのサイト。

サイト内では様々なWEBフォントを配布しているので、きっと気に入ったフォントが見つかるはず！

因みに、普通のフォントは重いものだと1MB以上のデータ量になることもありますが、WEBフォントは数十KBだったりと、データ量の重さにかなりの差があります。その為、SEOを意識しつつデザイン性の高いサイト制作を行うならば、確実にWEBフォントを使用したほうが良いのです。

導入方法

作業に慣れている人も慣れていない人も、作業に着手する前に必ずCSSデータのバックアップを取っておきましょう。

もし間違って設定してしまったら、最悪の場合復元できなくなるおそれがあるので、その点だけは注意して下さい。

とにかく、まずはお気に入りのフォントを探してみましょう。

WEBフォントの種類は沢山ありますが、日本語に対応したWEBフォントはまだ少ないのが少し難点。

因みに僕は、Noto Sans Japaneseという日本語に対応したWEBフォントを使用しています。

日本語のWEBフォントを導入したい方は下記をコピペするだけでも大丈夫です。

//この部分をCSSファイルにコピペして下さい
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

1 2	//この部分をCSSファイルにコピペして下さい @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

//既に設定されているfont-familyに追加して下さい。
（style.css内でctrl+Fを押して【font-family】という単語で検索すると出て来るはずです）
font-family: 'Noto Sans Japanese', sans-serif;

//既に設定されているfont-familyに追加して下さい。

（style.css内でctrl+Fを押して【font-family】という単語で検索すると出て来るはずです）

font-family: 'Noto Sans Japanese', sans-serif;

全力で赤枠部分をクリックして下さい。一秒間に16回くらい連打してもいいです（※ダメです）

style.cssの上部辺りにCSSファイルのデータをインポートしましょう。

font-familyを検索して見つけ出して、設定を追記しましょう。追記する際は、一番前に追記するようにしましょう。font-familyは前に記載されている設定から優先して効く用になるため、前方に記載すれば設定が反映しやすくなります。

これさえ設定できれば、あなたのブログやサイトも一味違う見た目になるはずです。

但し、調子に乗って様々なWEBフォントを使ってしまうと、読み込みが遅くなってしまうおそれがあるため、1～2個程度に抑えておきましょう。

どうやらGoogleのWEBフォントを使用した際に、環境によっては表示速度がかなり遅くなる事が判明しました。

デザイン性・可読性が上がるのは良いですが、表示速度が遅くなってしまっては本末転倒なので、仕方なく利用をやめることにします。

ただ、サーバーによっても表示速度は変わってくると思うので、まずは設定して、動作確認して問題なければ、全然問題ないかと。

検証する際には、検証機を揃えるだけでなく、様々な回線環境で動作テストを行う大切さがわかったので、今回は良かったです。