FontFace: 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.

FontFace() コンストラクターは、新しい FontFace オブジェクトを構築します。

構文

js
new FontFace(family, source)
new FontFace(family, source, descriptors)

引数

family

要素をスタイル設定する際に、このフォントフェイスと照合するために使用することができるフォントファミリ名を指定します。

@font-face の font-family 記述子と同じ型の値を取ります。 この値は、 FontFace.family プロパティを使用して読み込んだり設定したりすることもできます。

source

フォントのソースです。 以下のいずれかにすることができます。

  • フォントフェイスファイルの URL。
  • ArrayBuffer または TypedArray に入ったバイナリーのフォントフェイスデータ。
descriptors 省略可

オブジェクトとして渡すオプションの記述子の集合。 これは @font-face で利用できる任意の記述子を含むことができます。

ascentOverride

ascent-override で許可されでいる値と共に指定します。

descentOverride

descent-override で許可されでいる値と共に指定します。

display

font-display で許可されでいる値と共に指定します。

featureSettings

font-feature-settings で許可されでいる値と共に指定します。

lineGapOverride

line-gap-override で許可されでいる値と共に指定します。

stretch

font-stretch で許可されでいる値と共に指定します。

style

font-style で許可されでいる値と共に指定します。

unicodeRange

unicode-range で許可されでいる値と共に指定します。

variationSettings

font-variation-settings で許可されでいる値と共に指定します。

weight

font-weight で許可されでいる値と共に指定します。

例外

SyntaxError DOMException

記述子の文字列が、対応する @font-face 記述子の文法に照合しないか、指定するバイナリーソースを読み込むことができない場合に発生します。 このエラーでは FontFace.status が error に設定されます。

例

js
async function loadFonts() {
  const font = new FontFace("myfont", "url(myfont.woff)", {
    style: "normal",
    weight: "400",
    stretch: "condensed",
  });
  // wait for font to be loaded
  await font.load();
  // add font to document
  document.fonts.add(font);
  // enable font with CSS class
  document.body.classList.add("fonts-loaded");
}

仕様書

Specification
CSS Font Loading Module Level 3
# font-face-constructor

ブラウザーの互換性

BCD tables only load in the browser

関連情報