dom / latest / fontface / load.html /

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

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
load
45
35-45
Before Chrome 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
79
41
No
32
22-32
Before Opera 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
10
45
37-45
Before WebView 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
45
35-45
Before Chrome 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
41
32
22-32
Before Opera 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
10
5.0
4.0-5.0
Before Samsung Internet 5.0, the returned promise resolved with void instead of a FontFace object as required by the specification.

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/FontFace/load