Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

The @font-face は、Web ページを製作者が期待した通り描画するためにダウンロードされるべき、Web フォントを指定するための @ 規則を提供します。作成者が自身のフォントを提供できるようになるため、@font-face はユーザのコンピュータにインストールしているフォントの数に依存する必要性を排除します。@font-face は CSS のトップレベルだけでなく、CSS の条件付きグループ規則の中でも使えます。

構文

記述子

font-family
font プロパティの font face 値で使われることになるフォント名(すなわち、font-family: <family-name>;)
src
リモートフォントファイルの場所を表す URL、またはユーザのコンピュータ上のフォント名を local("Font Name") 形式で指定します。local() 構文を用いてユーザのローカルコンピュータのフォントを名前で指定することができます。もしフォントが見つからない場合、見つかるまで他のソースが検索されます。
font-variant
font-variant
font-stretch
font-stretch
font-weight
font-weight
font-style
font-style
unicode-range
font-face 規則で定義する Unicode コードポイントの範囲。

形式文法

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: [ <uri> [format(<string>#)]? | <font-face-name> ]#; ] ||
  [ unicode-range: <urange>#; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: normal | <feature-tag-value>#; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <weight>; ] ||
  [ font-style: <style>; ]
}

where
<family-name> = <string> | <IDENT>+
<feature-tag-value> = <string> [ <integer> | on | off ]?

この例は単にダウンロードフォントを指定し、ドキュメントの body 全体に適用します。

動作例を見る

<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.mozillademos.org/files/2468/VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

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

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

注意

  • フォントのダウンロードは同一ドメイン制限に従います(フォントファイルはそれらが使用されているページと同じドメインにある必要があります)。HTTP access controls によりこの制限を緩和できます。
  • TrueType、OpenType、WOFF のための MIME タイプが定義されていないため、ファイルの MIME タイプは考慮されません。

仕様

仕様書 策定状況 コメント
WOFF File Format 2.0
WOFF2 font format の定義
勧告候補 新しい圧縮アルゴリズムのフォントフォーマットを定義
WOFF File Format 1.0
WOFF font format の定義
勧告 フォントフォーマットの定義
CSS Fonts Module Level 3
@font-face の定義
勧告候補  

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 3.5 (1.9.1) 4.0 4.0 10.0 3.1
WOFF 3.5 (1.9.1) 6.0 9.0 11.10 5.1
WOFF2 39 (39)[1] 38 未サポート 24 未サポート
SVG フォント[2] 未サポート[3] (有) 未サポート (有) (有)
unicode-range

36 (36)

(有) 9.0 (有) (有)
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
基本サポート (有) 1.0 (1.9.1) ? 未サポート 10.0 (有)
WOFF 4.4 5.0 (5.0) 10.0 未サポート 11.0 5.0
WOFF2 未サポート 39.0 (39.0)[1] 未サポート ? ? 未サポート
SVG フォント[2] ? 未サポート[3] ? 未サポート 10.0 (有)
unicode-range ? 36.0 (36.0) ? 未サポート ? (有)

[1] Gecko 35 から Gecko 38 の WOFF2 サポートは、Aurora および Nightly バージョンのみ有効化していました。Beta および Release バージョンで使用するには、設定項目 gfx.downloadable_fonts.woff2.enabledtrue にしなければなりません。

[2] OpenType フォントパッケージ内の SVG グリフを許可するほうが好ましいため、SVG フォントのサポートは廃止されました。

[3] Gecko では SVG フォントの実装を登録した バグ 119490 がありましたが、SVG フォントが OpenType フォントパッケージ内の SVG グリフに置き換わったため、バグが閉じられました。

注記

  • 埋め込みの OpenType フォント形式はプロプライエタリな機能なので、ブラウザ実装状況の表に記載していません。IE 9.0 以前では、IE はこの形式だけをサポートしていました。
  • TrueType と OpenType は WOFF で置き換えられたため、記載していません。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, fscholz, ethertank, sosleepy, Level, Taken
 最終更新者: yyss,