FontFace: FontFace() コンストラクター

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。

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

構文

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

例

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");
}