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.
FontFace.load()
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
Specification |
---|
CSS Font Loading Module Level 3 # font-face-load |
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