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
.
Example
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
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