Googleが提供している無料のWEBフォント、「Google Fonts」。画像を使わずに様々なデザインのWEBフォントが無料で利用できるようになるのですが、スタイルシートから読み込めるようにする方法をご紹介。
Googleフォントってなに？っという方は下記を参照して下さい。
スタイルシートからGoogleFontsを読み込む
といっても使い方はとっても簡単で、現在使用している外部CSSに下記のように読み込むだけ。とっても簡単です。
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
基本的には<head>内に書き込むことが多いのですが、<head>内をスッキリさせたり、ソースが簡単に見れないようにすることもできるので、スタイルシートに記述して使う方法も覚えておいてもいいのではないでしょうか？
ちなみに僕はいつも上の表記の仕方ではなく「http:」を外して記述しています。
@import url(//fonts.googleapis.com/css?family=Lato:300,400,700);
意味はどちらも同じなのですが、問い合わせフォームなどでSSL（サイトセキュリティ）を導入する際に下記の書き方の方がトラブルが少なくてすみます。
コードも多少短くなりますしね。
ちょっとしたことですが、同じ意味なのであればトラブルが少なく汎用的なものを選ぼうというだけの話しです。
まとめ
今回の記事は短いですが以上です。Googlefontsは今日現在（2015/02/26）で671種類あり選ぶのも大変ですが、好みのフォントもきっと見つかるはずです。
とっても簡単にデザインにアクセントを加える事ができるのでオススメですよ。
ただし日本語のフォントは今のところないので英数字に限られてしまいますが…英語圏の方がうらやましい……
当サイトでもPC版のグローバルナビや見出しの一部で取り入れています。
テキストなので変更したい場合も文字を書き換えるだけなので、簡単です。
では今日はこの辺で！
