Webフォントとは？なんで使うの？
Webフォントが登場してかなり時間も立っているので今更ではありますけれど、ご多分に漏れずこのブログでも使っているのでその紹介をしましょう。
まず、「Webフォント」とはなにか、というところからざっくり説明していきます。
僕らが普段良く見る「文字」「活字」というのは、大抵なんらかの名前がついて、たとえばWindowsのパソコンでメモ帳をつかって文字を入力するとしたらおそらく「MS明朝」がデフォルトになっています。
同じくIE（Internet Explorer）でネットサーフィンをして読むことになる文字も、ほとんどがWindowsのデフォルトのフォントである「明朝体」。
Macの場合だと、基本的に「ヒラギノ」シリーズというフォントで表示されます。
さて、ここでのポイントはなにかといえば、最終的にユーザーがウェブページを見る環境によって、文字のフォント、ひいてはサイトのイメージが変わってくる、という点です。
それを解決するのがWebフォント、ってなわけですな！Webフォントを使えば、そのページをIEで見ようと、Chromeで見ようと、Safariで見ようと、同じフォントで表示させることができるのです。
つまり見る人の環境に左右されない、思い通りの印象を伝えられる、ということですね。
Google Web Fontsは無料で使えるWebフォント
そして、GoogleがそのWebフォントを無料で提供しているのです！
そんな素晴らしいWebフォントですけれど、日本語のフォントは数が少ない上に無料のものが少ない（というかない？）のがネックです。日本語はひらがな、かたかなそれぞれ五十音、さらに漢字が膨大にありますから、なかなか無料というわけにはいかないのでしょう。
その点、アルファベットは文字を揃えるのが比較的容易なこともあって（？）無料のフォントがたくさん揃っています。ちなみに2014年６月５日現在で637フォントも！
Google Web Fontsの使い方は３ステップ
では、実際にGoogle Web Fontsを使ってみましょう。
Google Web Fontsのページは英語だし、スタイルシートとかよくわかんないし、なんだか難しそう！
と思っているあなた！Google Web Fontsは３ステップで使うことができます！案外簡単ですのでついてきてみてください！３ステップは、
- 好きなフォントを選ぶ
- Google Web fontsのCSSを呼び出すコードをHeadに追加
- 好きなフォントを適応する要素を定義
これだけです。まあまあ、やってみましょう！
まずはステップ１、好きなフォントを選びます。
タイル状に並んだフォントの中から好きなフォントを選びます。今回は、このブログのタイトルに使っているPatrick Handというフォントの導入例を見てみましょう。
フォントの見本が表示されている下にあるボタンをクリックします。
すると、このフォントを使ったときのページ読み込みのパフォーマンスが表示されます。太字などが用意されていれば利用するかどうかの選択も可能です。
ウェブフォントは表示されるフォントを指定できる反面、ページの情報以外にフォント自体もダウンロードするため、ユーザー側の負担が増えることも頭に入れておきましょう。アルファベットであればそれほど気にする必要はないかと思います。
では、好きなフォントが選べたので、ステップ２に参りましょう。
ページを下にスクロールすると、コードが表示されたボックスがあります。このコードを、headタグの下に追加します。これはコピペするだけで大丈夫です！
[html]
<link href="http://fonts.googleapis.com/css?family=Patrick+Hand" rel="stylesheet" type="text/css" />
[/html]
これで、Google Web Fontsからフォントを引っ張ってくることができます。
ではステップ３で、Googleから貰ってきたフォントを適応する対象を決めましょう。
pやh1.h2,などの対象にスタイルシートで指定することができます。
[css]
p{
font-family: ‘Patrick Hand’, cursive;
}
[/css]
こんな感じですね。
これで設定は完了です。
このように反映することができます！
Google Web Fontsを使うと、発信者側の意図通りのフォントを表示させることができるのです。
「きちんと思い通りに伝えたい」「普通のフォントに飽きた」「部分的につかってオシャレにしたい」など、いろいろな利用方法があるかと思います。
Google Web fontsは無料で使えるので、あなたのホームページやブログにも導入してみては？
コメント