Home » web » ◉ Google web fontsの使い方（html作成初心者に解説したまとめ）
・その（１）

◉ Google web fontsの使い方（html作成初心者に解説したまとめ）
・その（１）

2012年2月12日日曜日

あるwebサイトを管理している知人が、「かっこ良くデザインしたはずのwebページがPCの環境によって崩れてしまう」とヘルプを求めてきた。

ブラウザの問題ならCSSやハックである程度対応できるが、webページのソースを見てみると、デザインのメインに指定している欧文フォントが、多くのPCにインストールされている一般的なものではなかった。

そこで問題のフォントを画像にしてしまうことを提案したが、頻繁な更新などを理由に即却下された。

次善の策と呼べるほど真剣に考えた訳ではないが、「あとは、Google web fontsの中から欧文フォントを選ぶくらいかな…」とぼそっとつぶやくと、これには食いついてきた。

ということで、Google web fontsについて使い方を解説するはめになった。

◎ まずweb fontとはなにか

・普通、webブラウザを使って、webページを見る際は、そのローカル側のPCにインストールされているフォント以外は表示できないが、CSS3のweb font技術を使えば、サーバー側に置いたフォントを利用して表示できる。ただしライセンスの問題が生じる場合がある。

◎ そして今回利用するGoogle web fontsとはなにか

Google web fontsは、web fontの一つで、多くのfont-family（現在444）があり、すべてがオープンソースなので、ライセンスフリー。商用でも非商用でも無償で利用できる。利用登録も不要。
また、CSS3のweb font技術も不要で、Google web Fonts APIを利用して、htmlのhead部分にフォントAPI の url を指定して、通常のcssで font-family を指定するだけで使える。
PCにダウンロード、インストールして普通のフォントと同様に利用することもできる。もちろんこの場合もライセンスフリー。
ただし、現時点では欧文フォントのみ、日本語フォントは無い。

◎ Google web fontsのもっとも簡単な使い方

Google web fontsのページを開く。もし上の画像のページが開いてしまったら、ブルーのボタン [Start choosing fonts] をクリック。

デフォルトでは、フォントを選ぶ [Chooze]（下側のブルーのエリア）の状態になっていて、フォントの一覧表示の方法を決めるタブは [Sentence] になっている。このままでスクロールしながら、フォントを選ぶ。フォントを選ぶ名称などの手かがりがわかっていたら、その名称で検索してもかまわない。

気に入ったフォントはとりあえずコレクションに入れておく。各フォントの右側ブルーの「Add to Collection」ボタンをクリックすると、コレクションに入る。下側のブルーエリアに追加される。ボタンは [Remove from Collection] にかわるので、コレクションから削除したいときはこれをクリック。
コレクションしたフォント内容を確認するなら、下側のブルーエリア「Review」をクリックする。各フォントの見出しや段落内で使用する際の各種サイズサンプルを表示してくれる。
使うフォントが決定したら、下側のブルーエリアの [Use] ボタンをクリック。下へスクロール。
「1. Choose the styles you want:」で、実際に使うフォントにチェックを入れる。コレクションに入っているフォントが一つならスルーしてもかまわない。

「2. Choose the character sets you want:」は各言語で使用する文字のサブセットのことなので、普通に英文を表示するだけならスルーしてかまわない。デフォルトは「Latin (latin)」にチェックが入っている。
「3. Add this code to your website:」のブルー地の白い四角で囲まれたテキスト部分をコピー。htmlのheadタグの間にペースト。