Google Web Fonts を使ってみた

Google Web Fonts を使ったので、忘れないように自分用メモ。

※使用するフォントは、商用・個人利用が無料でできるのかを、必ず事前にご確認ください！（商用では使用禁止のものや、有料のものもあります。）

　

簡単に使う

（1）Google Fonts（https://www.google.com/fonts/）から
使いたいフォントを選ぶ。
［例］Lobster
https://www.google.com/fonts/specimen/Lobster

（2）HTML の head内に以下のような記述を追加する。

<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

（3）CSSで設定する

.ttl {
font-family: 'Lobster';
}

（完成！）

　

フォントのデータをアップロードする

「別サーバからリンクを設定できない場合」は、
フォントのデータをアップロードすることで Google Web Fonts を使用できます。

（1）Google Fonts（https://www.google.com/fonts/）から
使いたいフォントを選ぶ。

（2）データをダウンロードする
フォント詳細ページの右上にある「↓」ボタンをクリックして、ダウンロード。

（3）ダウンロードした「Lobster.zip」を解凍
・Lobster-Regular.ttf
・OFL.txt

※「.ttf」はIEで対応していないため、IE用の形式を用意する。
［参照］Can I use... Support tables for HTML5, CSS3, etc http://caniuse.com/#search=ttf

（4）IE だけに対応しているフォント形式「.eot」か、各種ブラウザに幅広く対応している「.woff」に変換する。

［参照］Online font converter
http://www.fontconverter.org/

（5）問題がないエリアにアップロードする
今回は一番上の階層に「fonts」フォルダを作成し、格納しました。

（6）CSSで設定する　［例］IE9以降に対応するように記述

/* ----- Google Fonts ----- */
@font-face { /* IE用 */
    font-family: 'Lobster';
    src: url('../fonts/Lobster-Regular.eot');
}
@font-face { /* その他ブラウザ用 */
    url('../fonts/Lobster-Regular.woff') format('woff'),
    url('../fonts/Lobster-Regular.ttf') format('truetype'),
}

※IE 9 でうまく動作しなかったので、こんなカンジに…。
（「,」区切りだと IE でうまく読み込めないらしいので、途中で分割した。）

　

（おまけ）エフェクト　※IE 非対応。

Getting Started  |  Google Fonts  |  Google Developers
https://developers.google.com/fonts/docs/getting_started#Effects

カゲを付けたり、キャンバスに描いたようなニュアンスのある文字や、炎がぼうぼう燃えているアニメーション付き文字にもできるみたいです。
案件では使えないけど、遊びで使うには便利！
※Chrome, Firefox, Opera, Safari 対応。（一部、Chrome, Safari のみのものも有）