FontFace()
The FontFace()
constructor creates a new
FontFace
object.
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-family
descriptor 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
BCD tables only load in the browser