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-facefont-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.statuserror に設定されます。

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

ブラウザーの互換性

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() constructor

Legend

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

Full support
Full support

関連情報