FontFace API

FontFace API is used to control font loading.

This API provides a constructor FontFace(), which returns a font object.

new FontFace(family, source, descriptors);

FontFace() constructor accepts three parameters.

  • family: a string representing the font name, written in the same way as the font-family property of CSS @font-face.
  • source: The URL of the font file (must include the CSS url() method), or an ArrayBuffer object of the font.
  • descriptors: objects, used to customize font files. This parameter is optional.
var fontFace = new FontFace(
  "Roboto",
  "url(https://fonts.example.com/roboto.woff2)"
);

fontFace.family; // "Roboto"

FontFace() What is returned is a font object, which contains font information. Note that the font file has not yet started to load at this time.

The font object contains the following attributes.

  • FontFace.family: A string representing the name of the font, which is equivalent to the font-family property of CSS.
  • FontFace.display: A string that specifies how to display the font during loading, which is equivalent to the font-display property of CSS. It has five possible values: auto (determined by the browser), block (during font loading, the content will not be displayed in the first 3 seconds, and then as long as the loading is not completed, the backup font will always be displayed), fallback (the content cannot be displayed in the first 100 milliseconds, the fallback font is displayed in the next 3 seconds, and then the fallback font is always displayed as long as the font has not been loaded), optional (the content cannot be displayed in the first 100 milliseconds, and then as long as the font is not available After loading, the backup font will always be displayed), swap (as long as the font has not been loaded, the backup font will always be displayed).
  • FontFace.style: a string, equivalent to the font-style property of CSS.
  • FontFace.weight: A string, equivalent to the font-weight property of CSS.
  • FontFace.stretch: a string, equivalent to the font-strentch property of CSS.
  • FontFace.unicodeRange: string, equivalent to the attribute of the same name of the descriptors object.
  • FontFace.variant: string, equivalent to the attribute of the same name of the descriptors object.
  • FontFace.featureSettings: string, equivalent to the attribute of the same name of the descriptors object.
  • FontFace.status: A string representing the loading status of the font. There are four possible values: unloaded, loading, loaded, and error. This attribute is read-only.
  • FontFace.loaded: returns a Promise object. The success or failure of font loading will cause the state of the Promise to change. This attribute is read-only.

There is only one method of the font object, FontFace.load(), which will actually start loading the font. It returns a Promise object, and the state is determined by the result of font loading.

var f = new FontFace('test','url(x)');

f.load().then(function () {
  // webpage can start using the font
));