Google Web Fontsの使い方
Studio Umi
こんにちは、デザイナーの山砥です。滋賀県にきて初めての梅雨、まっただ中です。カビが怖くて換気扇つけっぱなし…
そんな話はさておき、今日は先日個人的に触れる機会があったWebフォント、特にGoogle Fontsの話を書いていこうと思います。
Webフォント、気になるけど触ったことがない、名前は知っているけど実際どんなものか知らない、という方もいらっしゃるのではないでしょうか。
Webフォントとは
>“元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。”
（引用元：wikipedia）
Webフォントとはサイト上でデザイナーが意図したフォントを表示できる仕組みです。
普通であればユーザーのPCが持っているフォントをブラウザ上で表示しているのに対し、Webフォントを使用する際には、サーバー上に置いたフォントを指定して呼び出すことでデザイナーの意図したフォントを表示することができます。
さらに、Webフォント配信サービスを使えば、配信されている数多くのフォントをサイトのイメージに合わせて使うことができるのです。
つまり、これまで画像で表示させていた文字も、Webフォントを使用すれば画像なしで表示することができます。
しかも、表示されるも文字はテキストデータなので、ユーザがコピーすることもできます。
Google Web Fontsとは
Google Web Fonts
とは、Googleの提供しているWebフォントサイトです。
個人利用・商用利用問わず無料で利用することが出来ます。
普通のWebフォント利用方法とほぼ同じですが、フォントファイルをアップロードする必要がありません。
Google Web Fontsの使い方
それでは実践ぽくなっていきますが、簡単に図を交えてもう少し詳しくご紹介していきます。
1.使用したいフォントを選択する
まずはGoogle Fontsのサイトに行ってみましょう。
今現在(2014.07)、638種類あるみたいです。これだけの中から探し出すのは大変なので、使いたいフォントがだいたい決まっていれば画面左でカテゴリを絞ったりもできます。
使いたいフォントが決まったら、サンプルの下に並んでいるアイコンのうち、真ん中の"Quick-use"をクリックしてください。
これでフォントの設定画面にうつります。
2.CSSをheadに追加する
次に、コードの記述です。今回は1番目と2番目の設定は置いておいて、3番目の設定を見ていただきたいと思います。
このテキストボックス内に表示されているコードをコピーしてheadタグ内に挿入します。
Standard、@import、JavaScriptの3種類ありますが、とりあえずはStandard内のコードをコピー＆ペーストすれば大丈夫です。
3.CSSでfont-familyを適用させる
これで最後です！4番目の設定にある"font-family"プロパティをコピーして、あとは適用させたい要素にペーストします。
サンプルコードはこんな感じです。
```css
p{
font-family: 'Open Sans', sans-serif;
}
```
以上で終わりです！簡単ですね！
今回デモページをお見せすることはできませんでしたが、この手順を踏めば簡単に使えてしまいます。
おまけ:Webフォントのメリット・デメリット
便利なWebフォントですが、メリット・デメリットはもちろんあります。
まずメリット。
- テキストデータなので、SEOに有効
- HTMLやCSSを編集するだけなので、メンテナンスが効率的
- 主要なブラウザやタブレット端末でもサポートされている
そしてデメリット。
- 日本語対応のものが少ない
- ブラウザによっては表示に多少の違いも
- 読み込みに時間がかかる
やはりメリットデメリットはつきものですね。
いかがでしたしょうか。
Webフォントというだけで少し億劫に感じてしまう方もいらっしゃるかと思いますが、Google Web Fontsはたったの3ステップで使えてしまうんです！簡単便利！
ただし、Google Web Fontsは現在欧米フォントのみしか対応されていません。
ですが、日本語Webフォントを配信しているところもありますので、気になる方は探してみてはいかがでしょうか！
