登場以来、だいぶ環境も整ってきていることもあり、最近はいろいろなサイトやブログなどで利用されているのを見かけるWebフォント。

でも導入って難しいんじゃないの?」「いやだお高いんじゃないの?」なんて思っていらっしゃる方が多いかもしれませんが、Googleが提供するWebフォントサービス「Google Fonts」に関しては無料で400以上のフォントを利用できちゃいます。
今回はそんな「Google Fonts」をサクリと導入する方法についてまとめてみました。

導入は難しく考えちゃいかんですたい

「Google Fonts」なら正直、あんまり小難しいことはせずにWebフォントを利用できます。
まぁ、ひとつ言うなら英数字にしか適用されないので、可能な限り使う箇所は絞った方が良いかなと。

一応、日本語と英数字が混在するテキストに適用させることはできます。
ただ、Mobile Webkitのブラウザ(iPhoneとかiPod TouchとかのSafariなど)で表示させると、日本語部分だけが消えてしまうという事象が発生してしまうので、それを避けるためにも英数字だけのタイトルや見出しに使うのことをオススメします。

追記
2014年現在のMobile Webkitブラウザでは、日本語が混在していてもきちんと表示されるようになったので、日本語の織り交ぜられた箇所にフォントを充てても問題ありません。

Google Fontsを使ってみる

Google Fontsをサイトで利用できるようにする

Google Fonts

まずは「Google Fonts」にアクセスしましょう。
400以上もあるので、選ぶのは大変だと思いますが、右サイドにあるFiltersからある程度カテゴリを絞ってやれば少しはラクになるはず。

Google Fonts

使いたいフォントが見つかったら、フォントサンプルの下にあるアイコンのうち真ん中の「Quick-use」をクリックします。するとフォントの設定方法の画面に遷移します。

ここでは、基本的に1番目、2番目の項目をすっ飛ばしてしまっても構いません。

ただし、1番目の項目ではフォントの太さ(font-weight)がいくつかあるものもあるので、例えば太字も使えるようにしたいなんて場合には、使いたいフォントの太さをチェックボックスをオンにしておくといいです。

Google Fonts

設定の方法は、Standard、@import、javascriptの3種類あるので、自分の好みで選んでください。ここではStandardを選択したやり方で進めていきます。

表示されているコード<link href='http://fonts.googleapis.com/css?...というのをコピーして、Google Fontsを使いたいサイトのhead要素にペーストします。位置は要素内ならまぁどこでもいいですが、解りやすくサイトのCSSファイルを呼び出す行の下にでも入れておくといいかと思います。

ひとまずこれで利用準備はOKです。

Webフォントを充てたい箇所にCSSを記述する

続いて、フォントを適用させたい箇所のid属性やclass属性のところに、以下のように記述を付け加えます。
font-familyは4番目のところに表示されているものをコピペするだけでかまいません。

#title {
  font-family: 'フォント名', sans-serif;
  font-weight: 400; /* フォントの太さをいくつか選択した場合はその太さの数字を入力 */
}

記述したCSSファイルをサーバーにアップロードしてWebサイトを見てみると、指定したWebフォントが適用された状態で表示されます。ね、かんたんでしょ?

Webフォントをまとめて選んで使いたい

さきほどのパターンはひとつのフォントだけを選択して呼び出すかたちでしたが、いくつかのフォントを使いたいという場合もあります。

もちろん、先ほどの方法でいくつかのフォントをそれぞれ設定してやってもいいわけですが、それも如何せんめんどくさい。

なので、まとめて使うには以下の流れで進めます。

Google Fonts

3つ並ぶアイコンの右に[Add to Collection]というボタンがあります。
使いたいフォントごとに、このボタンをクリックしていきます。

Google Fonts

クリックしていくことで、フッターエリアに選択したフォントが追加されていきます。
「やっぱりこのフォントいらん」ってときは、右にある[×]をクリックすれば選択を解除できます。

Google Fonts

選び終わったら、いちばん右にある[Use]をクリックします。
先ほど同様にフォント設定の画面になるので、同じ方法でCSSに付け加えてやればいいだけです。

Standardだとlink要素を複数行入れるの? と思われるかもしれませんが、追加するのは1行だけなので、ひとつだけWebフォントを使う場合と何ら変わりませんから安心してください。

というわけで

以上が「Google Fonts」の使い方になります。ほら全然難しくないっしょ?

Webフォントは、ほぼほぼ、現行のモダンブラウザであれば表示可能。まぁ撲滅推奨なIE6とかのことは知ったこっちゃありません。

一昔前だったら、「ちょっとテキストなんか使わずにかっこいいフォントで画像を作ってー」なんて感じでしたが、それだと後々の修正が発生したときや、画像化したテキストを変更したいなんてときに、いろいろ手間が掛かりました。

Webフォントを利用すれば、そうした手間は軽減されますし、今後ますます利用が盛んになるんじゃないかなと思います。
これから先のこともありますし、今のうちからWebフォントに触れておくといいかも。

ちなみに、うちではCufonを使ってたんですが、最近「Google Fonts」に置き換えました。今のところ特に困ったことにはなっていませんね。

あんまりごにょごにょ考えすぎるよりも、まずは使ってみるってな感じでチャレンジしてみてください。

Commentsコメントしてもらえると励みになります