webフォントはcssで簡単に指定できる!

ヘッダ画像

webフォントの使い方

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フォントが表示できないことがあります。

ほとんどの場合はブラウザのキュッシュが影響しているのではと考えられます。(ブラウザの更新ボタンでは全データが読み込まれないことも多いのです)

「記述は間違っていない」という場合は下記をお試しください。

WEBデータを強制的に再読み込みする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

超簡単!アイコンフォント Font Awesomeの使い方

ひと昔前なら画像で表現していたようなアイコン。 ウェブフォントの登場によって、描画速度が速く手軽に挿 […]

3分で設置できる!?CSS3の角丸グラデーションボタン

CSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像な […]

日本語フリーwebフォント 表示サンプル(ゴシック編)

無料のwebフォントとして使用できる日本語書体を紹介しているサイトはたくさんあるのですが、肝心の表示 […]

Webフォントとは

ウェブブラウザではそのパソコンにインストールされているフォントを使用してページを表示します。基本的に […]