FontFace.load()

The load() method of the FontFace interface loads a font based on current object's constructor-passed requirements, including a location or source buffer, and returns a Promise that resolves with the current FontFace object.

Syntax

FontFace.load()

Parameters

None.

Return value

A Promise that resolves with a reference to the current FontFace object when the font loads or rejects with a NetworkError DOMException if the loading process fails.

Exceptions

NetworkError DOMException

Indicates that the attempt to load the font failed.

Examples

This simple example loads a font and uses it to display some text in a canvas element (with an id of js-canvas).

const mycanvas = document.getElementById("js-canvas");

// load the "Bitter" font from google fonts
let font_file = new FontFace('FontFamily Style Bitter', 'url(https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2)');

font_file.load().then( () => {
  // font loaded successfully!
  mycanvas.width = 650;
  mycanvas.height = 100;
  var ctx = mycanvas.getContext('2d')

  ctx.font = '36px "FontFamily Style Bitter"'
  ctx.fillText('Bitter font loaded', 20, 50)
  },
(err) => {
  console.error(err)
});

:

Specifications

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

Browser compatibility

BCD tables only load in the browser