The FontFace() constructor creates a new FontFace object.
FontFace()
Syntax
new FontFace(family, source); new FontFace(family, source, descriptors);
Parameters
- family
-
Specifies a name that will be used as the font face value for font properties. Takes the same type of values as the
font-familydescriptor of@font-face. - source
-
The font source. This can be either:
- A URL
- Binary font data
- descriptors Optional
-
A set of optional descriptors passed as an object. It can contain any of the descriptors available for
@font-face:-
ascentOverride -
With an allowable value for
@font-face/ascent-override. -
descentOverride -
With an allowable value for
@font-face/descent-override. -
featureSettings -
With an allowable value for
@font-face/font-feature-settings. -
lineGapOverride -
With an allowable value for
@font-face/line-gap-override. -
stretch -
With an allowable value for
@font-face/font-stretch. -
style -
With an allowable value for
@font-face/font-style. -
unicodeRange -
With an allowable value for
@font-face/unicode-range. -
variant -
With an allowable value for
@font-face/font-variant. -
variationSettings -
With an allowable value for
@font-face/font-variation-settings. -
weight -
With an allowable value for
@font-face/font-weight.
-
Examples
async function loadFonts() { const font = new FontFace('myfont', 'url(myfont.woff)'); // wait for font to be loaded await font.load(); // add font to document document.fonts.add(font); // enable font with CSS class document.body.classList.add('fonts-loaded'); }
Specifications
| Specification |
|---|
| CSS Font Loading Module Level 3 # font-face-constructor |
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 | |
FontFace |
35
|
79
|
41
|
No
|
22
|
10
|
37
|
35
|
41
|
22
|
10
|
4.0
|
See also
© 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/FontFace
