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.
The code below defines a font face using data at the URL "myfont.woff" with a few font descriptors. Just to show how it works, we then define the stretch
descriptor using a property.
const font = new FontFace("myfont", "url(myfont.woff)", {
style: "italic",
weight: "400",
});
font.stretch = "condensed";
Next we load the font using FontFace.load()
and use the returned promise to track completion or report an error.
font.load().then(
() => {
},
(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.