web api interface
FontFace
Available in workers
The FontFace interface of the CSS Font Loading API represents a single usable font face.
This interface defines the source of a font face, either a URL to an external resource or a buffer, and font properties such as style, weight, and so on.
For URL font sources it allows authors to trigger when the remote font is fetched and loaded, and to track loading status.
Constructor
FontFace()- : Constructs and returns a new
FontFaceobject, built from an external resource described by a URL or from anArrayBuffer.
- : Constructs and returns a new
Instance properties
ascentOverride- : A string that retrieves or sets the ascent metric of the font. It is equivalent to the
ascent-overridedescriptor.
- : A string that retrieves or sets the ascent metric of the font. It is equivalent to the
descentOverride- : A string that retrieves or sets the descent metric of the font. It is equivalent to the
descent-overridedescriptor.
- : A string that retrieves or sets the descent metric of the font. It is equivalent to the
display- : A string that determines how a font face is displayed based on whether and when it is downloaded and ready to use.
family- : A string that retrieves or sets the family of the font. It is equivalent to the
font-familydescriptor.
- : A string that retrieves or sets the family of the font. It is equivalent to the
featureSettings- : A string that retrieves or sets infrequently used font features that are not available from a font’s variant properties. It is equivalent to the CSS
font-feature-settingsproperty.
- : A string that retrieves or sets infrequently used font features that are not available from a font’s variant properties. It is equivalent to the CSS
lineGapOverride- : A string that retrieves or sets the line-gap metric of the font. It is equivalent to the
line-gap-overridedescriptor.
- : A string that retrieves or sets the line-gap metric of the font. It is equivalent to the
loadedRead only- : Returns a
Promisethat resolves with the currentFontFaceobject when the font specified in the object’s constructor is done loading or rejects with aSyntaxErrorDOMException.
- : Returns a
statusRead only- : Returns an enumerated value indicating the status of the font, one of
"unloaded","loading","loaded", or"error".
- : Returns an enumerated value indicating the status of the font, one of
stretch- : A string that retrieves or sets how the font stretches. It is equivalent to the
font-stretchdescriptor.
- : A string that retrieves or sets how the font stretches. It is equivalent to the
style- : A string that retrieves or sets the style of the font. It is equivalent to the
font-styledescriptor.
- : A string that retrieves or sets the style of the font. It is equivalent to the
unicodeRange- : A string that retrieves or sets the range of unicode code points encompassing the font. It is equivalent to the
unicode-rangedescriptor.
- : A string that retrieves or sets the range of unicode code points encompassing the font. It is equivalent to the
variant- : A string that retrieves or sets the variant of the font.
variationSettings- : A string that retrieves or sets the variation settings of the font. It is equivalent to the
font-variation-settingsdescriptor.
- : A string that retrieves or sets the variation settings of the font. It is equivalent to the
weight- : A string that contains the weight of the font. It is equivalent to the
font-weightdescriptor.
- : A string that contains the weight of the font. It is equivalent to the
load()- : Loads a font based on current object’s constructor-passed requirements, including a location or source buffer, and returns a
Promisethat resolves with the current FontFace object.
- : Loads a font based on current object’s constructor-passed requirements, including a location or source buffer, and returns a
Examples
The code below defines a font face using data at the URL “my-font.woff” with a few font descriptors.
Just to show how it works, we then define the stretch descriptor using a property.
// Define a FontFace
const font = new FontFace("my-font", 'url("my-font.woff")', {
style: "italic",
weight: "400",
});
font.stretch = "condensed";
Next we load the font using load() and use the returned promise to track completion or report an error.
// Load the font
font.load().then(
() => {
// Resolved - add font to document.fonts
},
(err) => {
console.error(err);
},
);
To actually use the font we will need to add it to a FontFaceSet.
We could do that before or after loading the font.
For additional examples see CSS Font Loading API > Examples.