![](https://meglog.net/wp-content/uploads/2012113-1.jpg)
2012年のWebデザイントレンドのひとつとしても取り上げられているWebフォント。『Google Web Fonts』を使うと、びっくりするくらい簡単に導入できます。さすがGoogle先生!現在のところ欧文のみですが、手書き風やステンシル風など、400種類以上のフォントが無料で使えるのはありがたいものです。これで、画像を作る工程が少し省けるかもしれないし、ユーザビリティ的にもSEO的にも良いかもしれませんね。
Google Web Fonts の使い方
まず、『Google Web Fonts』にアクセスしましょう。
「START CHOOSING FONTS」をクリックします。
![「START CHOOSING FONTS」をクリック 「START CHOOSING FONTS」をクリック](https://meglog.net/wp-content/uploads/2012113-23.jpg)
次に、使いたいフォントを選びます。
フォント名で検索したり、フォントのスタイル等でソートできます。また、表示させたい単語や文章でプレビューできるので、とても便利です。詳しくは、画像を参考になさってください。
![お好みのフォントを探してみよう。 お好みのフォントを探してみよう。](https://meglog.net/wp-content/uploads/2012113-3-600x425.jpg)
使いたいフォントが見つかったら「Add to Collection」をクリック。
ここで複数のフォントを選ぶことも可能です。
![「Add to Collection」をクリック 「Add to Collection」をクリック](https://meglog.net/wp-content/uploads/2012113-4.jpg)
フッターに選んだフォントが追加されたら、「USE」をクリック。
![「USE」をクリック 「USE」をクリック](https://meglog.net/wp-content/uploads/2012113-5-600x409.jpg)
あとはHTMLとCSSに短いコードをコピペするだけ!
上のコードをHTMLファイルの
~内にコピペして、下のコードをCSSファイルの適用させたいセレクタにコピペすれば、これで完了。あっという間にWebフォントが使えてしまいます!![あとはコードをコピペするだけ! あとはコードをコピペするだけ!](https://meglog.net/wp-content/uploads/2012113-6-600x296.jpg)
個人的には、ユーザースタイルシートなどを考慮すると、ブランディングとして重要な部分(たとえばサイト名のロゴなど)にWebフォントを使用するのは躊躇いますが、ナビゲーションの文字やサイドバーの見出しなんかには、積極的に使ってみたいなーと思っている次第でございます。