プログラミング

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

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

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

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

@font-faceの書き方

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

@font-face {
font-family: フォント名;
src: フォントのURL フォントの形式; オプション;
}

フォント名

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

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

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

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

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

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

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

format(“woff”) Web Open Font Formatフォント
format(“truetype”) True Typeフォント
format(“opentype”) Open Typeフォント
format(“embedded-opentype”) Embedded-OpenTypeフォント
format(“svg”) SVGフォント

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

オプション

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

font-style フォントのスタイルを指定
font-weight フォントの太さを指定
font-stretch フォントの幅を指定
font-variant フォントのスモールキャップを指定
font-feature-settings OpenTypeフォントの使用を指定
unicode-range Webフォントの適用範囲を指定

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

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

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

1 Comment

Leave a Comment