FontFace はCSS フォント読み込み API のインターフェイスで、単一の使用可能なフォントフェイスを表します。

このインターフェイスは、フォントフェイスのソース（外部リソースへの URL またはバッファー）と、style やweight などのフォントプロパティを定義します。URL フォントのソースの場合、リモートフォントが取得され読み込まれたときに発生させたり、読み込み状況を追跡したりすることができます。

コンストラクター

FontFace()

新しいFontFace オブジェクトを、 URL で記述されている外部リソースまたはArrayBuffer から構築して返します。

インスタンスプロパティ

FontFace.ascentOverride

フォントのアセンダーの寸法を取得または設定する文字列です。これはascent-override 記述子と等価です。

FontFace.descentOverride

フォントのディセンダーの寸法を取得または設定する文字列です。これはdescent-override 記述子と等価です。

FontFace.display

フォントがダウンロードされ、使用する準備ができているかどうかによって、フォントフェイスがどのように表示されるかを決定する文字列。

FontFace.family

フォントのファミリを取得または設定する文字列です。これはfont-family 記述子と等価です。

FontFace.featureSettings

フォントの variant プロパティでは利用できない、使用する頻度の低いフォント特性を取得または設定する文字列です。 CSS のfont-feature-settings プロパティと等価です。

FontFace.lineGapOverride

フォントの行ギャップの寸法を取得または設定するには文字列を指定します。これはline-gap-override 記述子と等価です。

FontFace.loaded読取専用

Promise を返します。これは、オブジェクトのコンストラクターで指定したフォントを読み込みに完了した場合に、現在のFontFace オブジェクトで解決したり、SyntaxErrorDOMException で拒否されたりします。

FontFace.status読取専用

フォントの状態を示す列挙値"unloaded"、"loading"、"loaded"、"error" のいずれかを返します。

FontFace.stretch

文字列で、フォントがどのように伸縮するかを取得または設定します。これはfont-stretch 記述子と同等です。

FontFace.style

文字列で、フォントのスタイルを取得または設定します。これはfont-style 記述子と等価です。

FontFace.unicodeRange

文字列で、フォントを包含する Unicode コードポイントの範囲を取得または設定します。これはunicode-range 記述子と等価です。

FontFace.variant

文字列で、フォントのバリアントを取得または設定します。

FontFace.variationSettingsExperimental

文字列で、フォントのバリエーション設定を取得または設定します。これはfont-variation-settings 記述子と等価です。

FontFace.weight

文字列で、フォントの太さが入ります。これはfont-weight 記述子と等価です。

FontFace.load()

現在のオブジェクトのコンストラクターに渡された要求（場所または元のオブジェクト内のバッファーも含む）に基づいてフォントを読み込み、現在の FontFace オブジェクトに解決するPromise を返します。

例

下記のコードでは、URL "myfont.woff" のデータといくつかのフォント記述子を使用してフォントフェイスを定義しています。これがどのように動作するのかを示すために、プロパティを使用してstretch 記述子を定義しています。

// FontFace を定義const font = new FontFace("myfont", "url(myfont.woff)", {  style: "italic",  weight: "400",});font.stretch = "condensed";

次に、FontFace.load() を使ってフォントを読み込み、返すプロミスを使用して完了を追跡したり、エラーを報告したりします。

// フォントを読み込むfont.load().then(  () => {    // 解決 - document.fonts にフォントを追加  },  (err) => {    console.error(err);  },);

実際にフォントを使用するには、FontFaceSet に追加する必要があります。これはフォントを読み込む前でも後でもできます。

それ以外の例は、CSS フォント読み込み API > 例を参照してください。

仕様書

ブラウザーの互換性

関連情報

• @font-face