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