概要

@font-face は、Web ページを製作者が期待した通り描画するためにダウンロードされるべき、Web フォントを指定するための @ 規則を提供します。

構文

@font-face {
  font-family: <a-remote-font-name>;
  src: <uri>;
}

値

<a-remote-font-name>
font プロパティの font face 値で使われることになるフォント名
<uri>
リモートフォントファイルの場所を表す URL

注意

他のホストからフォントをダウンロードするか否かの判断には HTTP access controls が使われます。

Firefox は TrueType および OpenType フォントをサポートします。

Note: TrueType と OpenType のための MIME タイプが定義されていないため、ファイルの MIME タイプは考慮されません。

ダウンロードされたフォントを使ったページを描画する際、まず Firefox は利用可能なフォントを使って描画し、そのあとダウンロード可能なフォントが読みこまれてから表示を更新します。この動作はコンテントを素早く描画し、徐々に意図された見た目に合うよう更新することを可能にしています。

例

動作例を見る

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }

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

仕様書

ブラウザ互換性

ブラウザ Lowest Version
Internet Explorer 4.0 .eot か .ote ファイルのみ
Firefox 3.5
Opera 10.0
Safari 3.1

MSDN Microsoft library の @font-face も参照のこと。

参考

font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, @font-face