FontFace

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

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

このインターフェイスは、フォントフェイスのソース(外部リソースへの URL またはバッファー)と、styleweight などのフォントプロパティを定義します。 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 オブジェクトで解決したり、 SyntaxError DOMException で拒否されたりします。

FontFace.status 読取専用

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

FontFace.stretch

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

FontFace.style

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

FontFace.unicodeRange

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

FontFace.variant

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

FontFace.variationSettings Experimental

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

FontFace.weight

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

FontFace.load()

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

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

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

font.stretch = "condensed";

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

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

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

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

仕様書

Specification
CSS Font Loading Module Level 3
# fontface-interface

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
FontFace
FontFace() constructor
ascentOverride
descentOverride
display
family
featureSettings
lineGapOverride
load
loaded
status
stretch
style
unicodeRange
variant
Non-standard
variationSettings
Experimental
weight
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.

関連情報