ホームページ、ブログに個性を出したい!Google Web Fontsはこんなに簡単に利用できる!

スポンサーリンク

Webフォントとは?なんで使うの?

photo credit: arnoKath via photopin cc

photo credit: arnoKath via photopin cc

Webフォントが登場してかなり時間も立っているので今更ではありますけれど、ご多分に漏れずこのブログでも使っているのでその紹介をしましょう。

まず、「Webフォント」とはなにか、というところからざっくり説明していきます。

僕らが普段良く見る「文字」「活字」というのは、大抵なんらかの名前がついて、たとえばWindowsのパソコンでメモ帳をつかって文字を入力するとしたらおそらく「MS明朝」がデフォルトになっています。

同じくIE(Internet Explorer)でネットサーフィンをして読むことになる文字も、ほとんどがWindowsのデフォルトのフォントである「明朝体」。

Macの場合だと、基本的に「ヒラギノ」シリーズというフォントで表示されます。

さて、ここでのポイントはなにかといえば、最終的にユーザーがウェブページを見る環境によって、文字のフォント、ひいてはサイトのイメージが変わってくる、という点です。

それを解決するのがWebフォント、ってなわけですな!Webフォントを使えば、そのページをIEで見ようと、Chromeで見ようと、Safariで見ようと、同じフォントで表示させることができるのです。

つまり見る人の環境に左右されない、思い通りの印象を伝えられる、ということですね。

Google Web Fontsは無料で使えるWebフォント

そして、GoogleがそのWebフォントを無料で提供しているのです!

Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography

そんな素晴らしいWebフォントですけれど、日本語のフォントは数が少ない上に無料のものが少ない(というかない?)のがネックです。日本語はひらがな、かたかなそれぞれ五十音、さらに漢字が膨大にありますから、なかなか無料というわけにはいかないのでしょう。

その点、アルファベットは文字を揃えるのが比較的容易なこともあって(?)無料のフォントがたくさん揃っています。ちなみに2014年6月5日現在で637フォントも!

Google Web Fontsの使い方は3ステップ

では、実際にGoogle Web Fontsを使ってみましょう。

Google Web Fontsのページは英語だし、スタイルシートとかよくわかんないし、なんだか難しそう!

と思っているあなた!Google Web Fontsは3ステップで使うことができます!案外簡単ですのでついてきてみてください!3ステップは、

  1. 好きなフォントを選ぶ
  2. Google Web fontsのCSSを呼び出すコードをHeadに追加
  3. 好きなフォントを適応する要素を定義

これだけです。まあまあ、やってみましょう!

まずはステップ1、好きなフォントを選びます。

20140605-google-web-fonts1

タイル状に並んだフォントの中から好きなフォントを選びます。今回は、このブログのタイトルに使っているPatrick Handというフォントの導入例を見てみましょう。

20140605-google-web-fonts2

フォントの見本が表示されている下にあるボタンをクリックします。

20140605-google-web-fonts3

すると、このフォントを使ったときのページ読み込みのパフォーマンスが表示されます。太字などが用意されていれば利用するかどうかの選択も可能です。

ウェブフォントは表示されるフォントを指定できる反面、ページの情報以外にフォント自体もダウンロードするため、ユーザー側の負担が増えることも頭に入れておきましょう。アルファベットであればそれほど気にする必要はないかと思います。

では、好きなフォントが選べたので、ステップ2に参りましょう。

20140605-google-web-fonts4

ページを下にスクロールすると、コードが表示されたボックスがあります。このコードを、headタグの下に追加します。これはコピペするだけで大丈夫です!

[html]
<link href="http://fonts.googleapis.com/css?family=Patrick+Hand" rel="stylesheet" type="text/css" />
[/html]

これで、Google Web Fontsからフォントを引っ張ってくることができます。

ではステップ3で、Googleから貰ってきたフォントを適応する対象を決めましょう。

pやh1.h2,などの対象にスタイルシートで指定することができます。

[css]
p{
font-family: ‘Patrick Hand’, cursive;
}
[/css]

こんな感じですね。

これで設定は完了です。

20140605-google-web-fonts5

このように反映することができます!

Google Web Fontsを使うと、発信者側の意図通りのフォントを表示させることができるのです。

「きちんと思い通りに伝えたい」「普通のフォントに飽きた」「部分的につかってオシャレにしたい」など、いろいろな利用方法があるかと思います。

Google Web fontsは無料で使えるので、あなたのホームページやブログにも導入してみては?

コメント