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

構文

/* <url> 値 */src: url("https://somewebsite.com/path/to/font.woff"); /* 絶対 URL */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("some font"); /* 引用符付きの空白を含む *//* <tech(<font-tech>)> 値 */src: url("path/to/fontCOLRv1.otf") tech(color-COLRv1);src: url("path/to/fontCOLR-svg.otf") tech(color-SVG);/* <format(<font-format>)> 値 */src: url("path/to/font.woff") format("woff");src: url("path/to/font.otf") format("opentype");/* 複数のリソース */src:  url("path/to/font.woff") format("woff"),  url("path/to/font.otf") format("opentype");/* フォントの形式と技術のついた複数のリソース */src:  url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),  url("trickster-outline.otf") format(opentype);

値

url()

<url> で構成される外部参照を指定し、その後にオプションでformat() とtech() 成分値を使用して、URL で参照するリソースの書式とフォント技術を指定します。format() とtech() の部分は、既知のフォント形式とフォント技術の文字列をカンマで区切ったリストです。ユーザーエージェントがフォント技術や形式に対応していない場合は、フォントリソースのダウンロードをスキップします。形式や技術のヒントが与えられない場合、フォントリソースは常にダウンロードされます。

format()

url() の値に続くオプション宣言で、ユーザーエージェントにフォント形式のヒントを提供します。この値に対応していない、または不正な値が指定された場合、ブラウザーはリソースをダウンロードせず、帯域幅を節約できる可能性があります。省略した場合、ブラウザーはリソースをダウンロードしてから形式を検出します。定義済みキーワードのリストにない後方互換性のためのフォントソースを含める場合は、形式文字列を引用符で囲んでください。取り得る値は下記フォント形式の節で説明しています。

tech()

オプション宣言でurl() の値に続き、ユーザーエージェントにフォント技術のヒントを提供します。tech() の値には、フォント技術で説明するキーワードのいずれかを指定します。

local(<font-face-name>)

ユーザーの端末で利用できるフォントの名前を指定します。フォント名を引用符で囲むことはオプションです。

メモ:OpenType と TrueType フォントの場合、<font-face-name> は、ローカルで利用できるフォントの名前表の中の PostScript 名か完全なフォント名のどちらかと照合するために用いられます。どちらの名前を使用するかはプラットフォームやフォントによって異なりますので、プラットフォーム間で適切に照合するためには、どちらの名前も含める必要があります。指定されたフォント名に対するプラットフォームの置換は使用してはいけません。

メモ:ローカルで利用できるフォントは、ユーザーの端末にプリインストールされている場合もあれば、ユーザーが積極的にインストールした場合もあります。

プリインストールされたフォントの組み合わせは具体的な端末のすべてのユーザーにとって同じである可能性が高いですが、ユーザーがインストールしたフォントの組み合わせはそうではありません。したがって、ユーザーがインストールしたフォントの組み合わせを探ることで、ウェブサイトは端末のフィンガープリントを作成することができ、ウェブサイトがウェブ全体でユーザーを追跡することができます。

これを防ぐために、ユーザーエージェントはlocal() を使用した、ユーザーがインストールしたフォントを無視する可能性があります。

<font-face-name>

ローカルにインストールされているフォントフェイスの完全な名前または PostScript 名をlocal() の部分値を使って指定します。名前はオプションで、引用符で囲むこともできます。フォントフェイス名は大文字小文字を区別しません。

解説

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

複数のsrc 記述子が設定されている場合、リソースを読み込むことができる最後の宣言ルールのみが適用されます。最後のsrc 記述子がリソースを読み込むことができ、かつlocal() フォントを含んでいない場合、ブラウザーは外部フォントファイルをダウンロードし、端末に利用できるフォントがあってもローカルバージョンを無視します。

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

フォントファイルが複数のフォントのコンテナーである場合には、下記に示すように、使用するサブフォントを示すフラグメント識別子が含まれます。

/* WhichFont はフォントファイル内のフォントの PostScript 名 */src: url(collection.otc#WhichFont);/* WhichFont は SVG フォントファイル内のフォントの要素 id */src: url(fonts.svg#WhichFont);

フォント形式

次の表は、有効なフォントキーワードと、それに対応するフォント形式を示しています。CSS内でフォント形式がブラウザーの対応しているかどうかを調べるには、@supports ルールを使用します。

古い正規化されていないformat() の値には、次のような構文があります。後方互換性のために引用符で囲まれた文字列として指定されます。

フォント技術

次の表は、tech() 記述子に有効な値と、それに対応するフォント技術を示したものです。 CSS 内でフォント技術にブラウザーの対応しているかどうかを調べるには、@supports アットルールを使用します。

公式定義

形式文法

<url> [ format( <font-format> ) ]? [ tech( <font-tech># ) ]?  |local( <family-name> )<font-format> = [ <string> | collection | embedded-opentype | opentype | svg | truetype | woff | woff2 ]<font-tech> = [ <font-features-tech> | <color-font-tech> | variations | palettes | incremental-patch | incremental-range | incremental-auto ]<font-features-tech> = [ features-opentype | features-aat | features-graphite ]<color-font-tech> = [ color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]

例

url() と local() を使用したフォントリソースの指定

下記の例は、同じフォントファミリーの 2つのフォントフェイスを定義する方法を示しています。font-family はMainText という名前にしています。最初のフォントフェイスは通常のフォントで、 2 つ目は同じフォントファミリーの太字バージョンです。

/* 通常のフォントフェイスの定義 */@font-face {  font-family: MainText;  src:    local(Futura-Medium),    url("FuturaMedium.woff") format("woff"),    url("FuturaMedium.otf") format("opentype");}/* 同じフォントファミリーで太字のフォントフェイス */@font-face {  font-family: MainText;  src:    local(Gill Sans Bold) /* 完全なフォント名 */,    local(GillSans-Bold) /* postscript 名 */,    url("GillSansBold.woff") format("woff"),    url("GillSansBold.otf") format("opentype"),    url("GillSansBold.svg#MyFontBold"); /* id による SVG フォントフラグメントの参照 */  font-weight: bold;}/* 通常フォントフェイスの使用 */p {  font-family: MainText;}/* Font-family は継承されるが、太字フォントが使用される */p.bold {  font-weight: bold;}

tech() と format() の値を用いたフォントリソースの指定

次の例は、tech() とformat() の値を使用してフォントリソースを指定する方法を示しています。color-colv1 技術とopentype 形式を用いるフォントをtech() とformat() の値で指定しています。ユーザーエージェントが対応していれば色フォントが有効になり、代替フォントとしてopentype の色なしフォントが指定されます。

@font-face {  font-family: "Trickster";  src:    url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),    url("trickster-outline.otf") format(opentype);}/* フォントフェイスの使用 */p {  font-family: "Trickster";}

古いブラウザー向けの代替の指定

ブラウザーは、フォントの使用可能なソースを列挙した単一のsrc 記述子を持つ@font-face を使用します。ブラウザーは読み込むことができる最初のリソースを使用しますので、アイテムは使用する環境設定の順に指定します。

一般的に、これはローカルファイルがリモートファイルより先に現れ、format() やtech() の制約があるリソースは、制約を持っていないリソースより先に現れるべきであるということを意味しています（そうでなければ、制約の少ないバージョンが常に選択されることになります）。例を示します。

@font-face {  font-family: "MgOpenModernaBold";  src:    url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),    url("MgOpenModernaBold.otf") format(opentype);}

上記のtech() に対応していないブラウザーは、最初の項目を無視し、 2 つ目のリソースを読み込むようにしてください。

ブラウザーによっては、不正なアイテムを無視せず、値が不正な場合はsrc 記述子全体が失敗するものがあります。このブラウザーに作業する場合、代替として複数のsrc 記述子を指定することができます。複数のsrc 記述子は逆順に試行されるので、末尾にはすべてのアイテムを含む通常の記述子を持っていることに注意してください。

@font-face {  font-family: "MgOpenModernaBold";  src: url("MgOpenModernaBold.otf") format(opentype);  src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental);  src:    url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),    url("MgOpenModernaBold.otf") format(opentype);}

ユーザーエージェントがフォントに対応しているかの調査

次の例は、@supports ルールを使ってユーザーエージェントがフォント技術に対応しているかどうかを調べる方法を示しています。@supports 内の CSS ブロックは、ユーザーエージェントがcolor-COLRv1 技術に対応している場合に適用されます。

@supports font-tech(color-COLRv1) {  @font-face {    font-family: "Trickster";    src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1);  }  .colored_text {    font-family: "Trickster";  }}

仕様書

ブラウザーの互換性

関連情報

• @font-face
• @supports
• font-display
• font-family
• font-stretch
• font-style
• font-weight
• font-feature-settings
• font-variation-settings
• unicode-range