WEB上にあるフォントをCSSを使って共有することができます。
GoogleもWebフォントのライブラリを提供するサービスを実施しています。
まずは表示例を見てみましょう。
タイトル文字にWebフォントのデザインが適用されています。
Labyrinthe Noir
Google Web Fontsでは、<link>タグを使う方法、@importを使う方法、JavaScript（Ajax）を使う方法が提供されています。
これに必要なのは<link>タグと<style>タグです。もちろん、テキスト本文にもクラスを割り当てます。
まず、<head>の中では次のように記述しています。
<link href='http://fonts.googleapis.com/css?family=Henny+Penny' rel='stylesheet' type='text/css'>
<style type="text/css">
.samplefont {
font-size: 24px;
font-family: 'Henny Penny', cursive;
}
</style>
上記の内、赤字部分をGoogleのページから取得することができます。
フォント名にスペースが入っている場合、上記のように「+」に置き換えます。また、複数のフォントを扱う場合は「|」でフォント名を並べます。
<link href='http://fonts.googleapis.com/css?family=Henny+Penny|Nova+Script|Griffy|Shojumaru|Metal+Mania|Stalinist+One' rel='stylesheet' type='text/css'>
<body>の中は次のように記述しています。<span>を使っていますが、<div>タグや<p>タグ、<h1>タグなどでもかまいません。
<span class="samplefont">Labyrinthe Noir</span>
<link>タグの方法では、外部CSSを使う場合、HTMLファイルとCSSファイルに記述が分散されてしまいます。
表記をCSSファイルにまとめると次のように記述できます。
@import url(http://fonts.googleapis.com/css?family=Henny+Penny);
.samplefont { font-size: 24px;
font-family: 'Henny Penny', cursive;
}
Web Fontsの取得手順です。
Google Web Fontsへアクセスします。
ページを下へと進めて好みのフォントを探します。
残念ながら現時点では日本語フォントは用意されていません。
好きなフォントが見つかったら、そのフォントの下にある「Quick-use」を押します。もし、使わないけれども後で参照したい場合は「Add to Collection」、詳細を見たい場合は「Pop out」を選びます。
フォントの画面に切り替わったらさらにフォントの種類を選びます。チェックが入っている場合はそのままで良いでしょう。
下にスクロールすると、3番目に<link>タグがありますので、これをコピーしてHTMLの<head>タグ内に貼り付けます。<style>タグの前が良いでしょう。
次に、4番目のフォント名（font-family）の記述がありますので、これもコピーして、HTMLの適用したいCSS内に貼り付けます。
CSSの準備ができたら、<body>内でフォントを適用したい箇所にクラス（ID）を割り当てます。
フォントを変更したいときは、３の手順をやり直して上書きします。