通常、Webサイトで表示される文字のフォントスタイルについては、font-style、font-variant、font-weight、font-size、line-height、font-familyなどのプロパティが指定できます。今回はフォントの種類を指定するfont-family、そしてWebフォントについて詳しく見ていきたいと思います。
１．基本的な文字のフォント指定
文字のフォントを指定する場合、以下のようにCSSを記述します。
div {
font-family: arial,sans-serif;
}
値（フォントの種類）はカンマで区切りで複数指定することができ、先に記述したフォントが優先して適用されます。指定したフォントが端末にインストールされていない場合は、ブラウザのデフォルトのフォントが適用されます。
しかしこの場合、端末の設定によって、デザインの段階で指定したデザイナーの意図しないフォントになってしまう可能性があります。次に紹介するWEBフォントを利用すると、端末やブラウザの設定に左右されず、フォントを表示することができます。
２．WEBフォントを使ってみる
Webフォントとは、CSS3で導入された新しい技術で、端末にインストールされているフォントではなくWEBサーバ上のフォントをダウンロードして適用します。
Google Web Fontsを使ってみました。
http://www.google.com/fonts/
（１）Google Web Fontsから適用したいフォントを選びます。
「Quick-use」を押すと、ソースが取得できます。
（２）取得したソースをHTMLファイルに適用します。
取得したソース（link href=…とfont-famiry=…の２つ）をページのhead内に記述しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Bonbon' rel='stylesheet' type='text/css'>
<style type='text/css'>
#sample {
font-family: 'Bonbon', cursive;
font-size: 50px;
color: blue;
}
</style>
</head>
<body>
<div id='sample'>Mobile First Marketing Lab</div>
</body>
</html>
（３）ブラウザでフォントが適用されているか確認します。
フォントスタイルが適用された文字は次のように表示されました！！
Webフォントを使えば、端末には入っていない上記のようなかなり特殊なフォントも使うことができます。
和文が使えるWebフォントサイトまとめ
GoogleWebフォントは現在のところ日本語対応していませんが、様々な企業から和文にも対応したWebフォントが提供されていますので、一部をご紹介します。
