The FontFace()
constructor creates a new FontFace
object.
The FontFace()
constructor creates a new FontFace
object.
js
new FontFace(family, source) new FontFace(family, source, descriptors)
family
Specifies a font family name that can be used to match against this font face when styling elements.
Takes the same type of values as the font-family
descriptor of @font-face
. This value may also be read and set using the FontFace.family
property.
source
The font source. This can be either:
ArrayBuffer
or a TypedArray
.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
.
display
With an allowable value for @font-face/font-display
.
featureSettings
With an allowable value for 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
.
variationSettings
With an allowable value for @font-face/font-variation-settings
.
weight
With an allowable value for @font-face/font-weight
.
SyntaxError
DOMException
Thrown when a descriptor string does not match the grammar of the corresponding @font-face
descriptor, or the specified binary source cannot be loaded. This error results in FontFace.status
being set to error
.
js
async function loadFonts() { const font = new FontFace("myfont", "url(myfont.woff)", { style: "normal", weight: "400", stretch: "condensed", }); // 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"); }
Specification |
---|
CSS Font Loading Module Level 3 # font-face-constructor |
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 |
© 2005–2023 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