HTML5+CSS3 で注目度の高い web フォントの使い方を紹介したいと思います。
ここでいう web フォントは google やモリサワの TypeSquare などクラウドフォントサービスではなく、自前でサーバにフォントをアップロードして使うスタンダードな手法です。（クラウドフォントサービスの場合はヘッダに専用タグを埋め込むという形になります）
基本的にはスタイルシートでの指定となり、使い方としては和文も欧文も変わりありません。
フォントのアップロード
使いたい web フォントが準備できたら、サーバにアップロードします。
アップロード先は任意で大丈夫ですし、必ずしも同一ドメイン内にアップロードする必要はありませんが、特別な理由がなければ、ドメイン直下にフォントフォルダを作成すればよいかと思います。
例）example.com/font/
css で指定を行う
スタイルシートでは web フォントとしてアップロードされた場所とフォーマットを指定します。
そして、そのフォントを使うためのクラスを定義するという形になります。
@font-face {
font-family:HuiFont109;
src: url('http://example.com/font/HuiFont109.woff') format("woff");
}
.HuiFont109{font-family: 'HuiFont109';}例えば、h1 の見出し部分にこの HuiFont109を適用するのであれば、該当 HTML に下記のように記述します。
<h1 class="HuiFont109">HuiFont109で h1 を表示</h1>たったこれだけで web フォントが表示されます。
※ちなみにわたしの場合は管理がしやすいため、フォント関連のスタイルシートは別に分けています。
主要ブラウザに対応させる
最近のブラウザでは上記 woff 形式で表示ができますが、少し古いブラウザやスマートフォンブラウザのために代替えで使用できるよう対応しておきます。Web フォントでは font-family に対して複数のフォーマットを指定できますので、下記のように追記します。
@font-face {
font-family:HuiFont109;
src:url('http://example.com/font/HuiFont109.eot?')format("eot"),url('http://example.com/font/HuiFont109.ttf') format("truetype"),url('http://example.com/font/HuiFont109.woff') format("woff");
}
.HuiFont109{font-family: 'HuiFont109';}ちなみに truetype は Safari ・ Android ・ iOS、eot は IE6～IE8 用を想定しています。
なお、～IE8 までは複数のフォントを指定するとエラーとなるため、一番最初に eot?と記述して以下はスキップすることで対処します。ほかにもフォントフォーマットがありますが、現在はこの3つのフォーマットでこと足りると思います。
各フォントフォーマットはオリジナルの形式から変換します。この方法については別の記事にしたいと思います。（フォーマットについては「web フォントとは」をご覧ください）
WordPress で web フォントが表示されない！？
これは余談になりますが、CSS や HTML で正規に記述しているにも関わらず、web フォントが表示できないことがあります。
ほとんどの場合はブラウザのキュッシュが影響しているのではと考えられます。（ブラウザの更新ボタンでは全データが読み込まれないことも多いのです）
「記述は間違っていない」という場合は下記をお試しください。
