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フォントが表示できないことがあります。
ほとんどの場合はブラウザのキュッシュが影響しているのではと考えられます。（ブラウザの更新ボタンでは全データが読み込まれないことも多いのです）
「記述は間違っていない」という場合は下記をお試しください。
