Webフォントを指定する@font-faceの書き方【CSS】

@font-faceはCSS3から導入された仕様で、Webフォントの利用を指定することができます。

Webフォントはサーバー上に置いてあるフォントデータを使って、ホームページ上に表示させるシステムやフォントのこと。

「Google Web Font」のようなWebフォントのサービスを使うという方法もありますが、ここでは@font-faceで指定する方法を確認します。

@font-faceの書き方

基本的には以下のように書き、フォントを使用したい箇所に指定するだけで、Webフォントを利用することができます。

フォント名

フォント名には任意のフォント名を指定します。

フォントを適用したい箇所に、font-familyやfontプロパティを使い、指定した値と同じ値を書くことで、@font-faceで指定した値（Webフォント）が表示されます。

フォントURLとフォント形式

url()という形で、WebフォントのファイルがあるURLを指定します。

また、フォントURLに続けて半角スペースで区切り、フォント形式を記述します。

これは、ブラウザによって対応しているフォントファイルの形式が異なるためです。

また、フォントURLとフォント形式のセットはカンマ（,）で区切って、複数指定することも可能です。

EOT（Embedded-OpenType）はInternet Explorer8以前で必要な形式です。

オプション

オプションとして、以下のプロパティや値を指定することができます。

unicode-rangeはCSSプロパティではないんですが、同じように指定することができます。

このように比較的簡単にWebフォントを利用することができます。

関連記事
『Webフォント(日本語・英語)の使い方とおすすめのサイトまとめ』