@font-face 規則の src CSS 記述子は、フォントデータを含むリソースを指定します。 @font-face 規則を有効にするためには必要です。

値は、外部参照又はローカルにインストールされたフォントフェイス名を、コンマで区切った優先度付きリストです。フォントが必要になった時、ユーザーエージェントはリスト上の参照を走査し、アクティブ化に成功した最初の物を使用します。無効なデータを持ったフォントや見つからないローカルのフォントは無視され、ユーザーエージェントはリスト上の次のフォントを読み込みます。

CSS のその他の URL と同様に、相対 URL を使用することができ、この場合は @font-face 規則を含むスタイルシートの位置からの相対になります。 SVG フォントの場合、 URL は SVG フォント定義を含む文書内の要素を指します。要素への参照が省略された場合は、参照は最初に定義されたフォントを含みます。同様に、複数のフォントを持つフォントコンテナー形式では、 @font-face 規則で指定された一つだけを読み込みます。読み込むフォントを示すためにはフラグメント識別子を使用します。コンテナー形式がフラグメントで識別する方法を持たない場合は、1から始まる添字 (例えば "font-collection#1" が最初のフォント、 "font-collection#2" が二番目のフォント、など) が使用されます。

関連する @規則@font-face
初期値n/a (required)
メディアすべて
計算値指定値
正規順序形式文法における値の出現順

構文

/* <url> 値 */
src: url(https://somewebsite.com/path/to/font.woff); /* 絶対 URL */
src: url(path/to/font.woff);                         /* 相対 URL */
src: url(path/to/font.woff) format("woff");          /* Explicit format */
src: url('path/to/font.woff');                       /* 引用符付きの URL */
src: url(path/to/svgfont.svg#example);               /* フラグメントで識別するフォント */

/* <font-face-name> 値 */
src: local(font);      /* 引用符なしの名前 */
src: local(some font); /* 空白が入った名前 */
src: local("font");    /* 引用符付きの名前 */

/* 複数の項目 */
src: local(font), url(path/to/font.svg) format("svg"),
     url(path/to/font.woff) format("woff"),
     url(path/to/font.otf) format("opentype");

<url> [ format( <string># ) ]?
<url> と、続けて任意で format() 関数で URL で参照するフォントリソースの形式を記述して外部参照を指定します。形式のヒントには、知られているフォント形式を示す書式文字列をコンマで区切ったリストを指定します。ユーザーエージェントが指定した形式に対応していない場合は、フォントリソースをのダウンロードを飛ばします。形式のヒントが指定されていない場合は、フォントリソースはが常にダウンロードされます。
<font-face-name>
local() を使用して、ローカルに導入されたフォントフェイスを、より大きなフォントファミリ内で単一のフォントフェイスを一意に識別する名前で指定します。任意で名前を引用符で囲むことができます。

形式文法

[ <url> [ format( <string># ) ]? | local( <family-name> ) ]#

where
<family-name> = <string> | <custom-ident>+

@font-face {
  font-family: examplefont;
  src: local(Example Font),
       url('examplefont.woff') format("woff"),
       url('examplefont.otf') format("opentype");
}

仕様書

仕様書 状態 備考
CSS Fonts Module Level 3
src の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 6Opera 完全対応 9Safari 完全対応 3.1WebView Android 完全対応 2.2Chrome Android ? Edge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 12Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

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

このページの貢献者: mfuji09
最終更新者: mfuji09,