@font-face

@font-face は CSS のアットルールで、テキストを表示するための独自フォントを指定します。フォントはリモートサーバーまたはユーザー自身のコンピューターにローカルにインストールされたフォントのどちらかから読み込むことができます。

構文

css

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

記述子

ascent-override

フォントのアセンダーの寸法を定義します。

descent-override

フォントのディセンダーの寸法を定義します。

font-display

フォントのダウンロードおよび準備状況に応じて、どのようにフォントフェイスを表示するかを特定します。

font-family

font プロパティのフォントフェイス値で使われる名前を指定します。

font-stretch

font-stretch 値です。 font-face で対応する範囲を指定するために、 font-stretch: 50% 200%; のように 2 つの値を受け付けます。

font-style

font-style 値です。 font-face で対応する範囲を指定するために、 font-style: oblique 20deg 50deg; のように 2 つの値を受け付けます。

font-weight

font-weight 値です。 font-face で対応する範囲を指定するために、 font-weight: 100 400; のように 2 つの値を受け付けます。

font-variant

font-variant 値です。

font-feature-settings

OpenType フォントで高度な印刷機能を制御することができるようにします。

font-variation-settings

OpenType または TrueType フォントの種類を低レベルで制御するために、変化形の特徴を表す 4 文字の軸名を、種類の値と共に指定します。

line-gap-override

フォントの行間の寸法を定義します。

size-adjust

このフォントに関連するグリフのアウトラインとメトリックの倍率を定義します。これにより、同じフォントサイズでレンダリングしたときに、さまざまなフォントのデザインを調和させることが容易になります。

src

フォントデータを含むリソースを指定します。これでリモートのフォントファイルの位置又はユーザーのコンピューターのフォント名を指定することができます。

ブラウザーにフォントのリソースがどの形式であるかのヒントを提供するために — それで最適なものを選択できます — format() 関数の中に形式を含めることができます。

css

src: url(ideal-sans-serif.woff) format("woff"),
     url(basic-sans-serif.ttf) format("truetype");

利用可能な形式は、"woff", "woff2", "truetype", "opentype", "embedded-opentype", "svg" です。

unicode-range

フォントで使用される Unicode コードポイントの範囲です。

解説

local() 関数が与えられると、ユーザーのコンピューターで探すフォント名を指定し、ユーザーエージェントがそれを見つけることができれば、そのローカルフォントを使用します。そうでなければ、 url() 関数を使用して指定されたフォントリソースをダウンロードして使用します。

@font-face で独自のフォントを提供できるようになることで、 "web-safe" フォント (つまり、広く利用できると考えられるほど一般的なフォント) と呼ばれる制限なしにコンテンツをデザインすることができます。ローカルにインストールされているフォントを、名前を指定して検索し使用することができる機能により、インターネット接続に頼らなくてもフォントを基本的なものからカスタマイズすることができるようになります。

url() と local() を両方とも使用することは一般的であり、そうすることでユーザーのインストールされたフォントのコピーが利用できればそれを利用し、ユーザーの端末に見つからない場合はフォントのコピーを代替としてダウンロードすることができます。

@font-face アットルールは、 CSS の最上位だけでなく、 CSS の条件付きアットルールグループの中でも使用することができます。

フォントの MIME タイプ

形式 MIME タイプ
TrueType font/ttf
OpenType font/otf
Web Open Font Format font/woff
Web Open Font Format 2 font/woff2

メモ

  • ウェブフォントは同一ドメイン制約の対象となります（フォントファイルはそれを使用するページと同じドメインに存在しなければなりません）。ただし、 HTTP アクセス制御を使用するとこの制限を緩和することができます。
  • @font-face は CSS セレクターの中で宣言することはできません。例えば、以下の例は動作しません。

    css

    .className {
  @font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"),
         local("HelveticaNeue-Bold"),
         url(MgOpenModernaBold.ttf);
    font-weight: bold;
  }
}

形式文法

@font-face = 
  @font-face { <declaration-list> }

例

ダウンロード可能なフォントを定義

この例は使用するダウンロード可能なフォントを指定し、文書の本文全体に適用します。

html

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
    }

    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

この例の出力結果は次のようになります。

ローカルフォントの代替を指定

この例では、ユーザーのローカルにある "Helvetica Neue Bold" が使用されます。もしユーザーがそのフォントをインストールしていない場合は (2 つの異なる名前が試されます)、代わりに "MgOpenModernaBold.ttf" という名前のダウンロードフォントが使用されます。

css

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

仕様書

Specification
CSS Fonts Module Level 4
# font-face-rule

ブラウザーの互換性

BCD tables only load in the browser

関連情報