We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The FontFace interface represents a single usable font face. It allows control of the source of the font face, being a URL to an external resource, or a buffer; it also allows control of when the font face is loaded and its current status.

Constructor

FontFace()
Constructs and returns a new FontFace object, built from an external resource described by an URL or from an ArrayBuffer.

Properties

This interface doesn't inherit any property.

FontFace.display
Is a CSSOMString that determines how a font face is displayed based on whether and when it is downloaded and ready to use.
FontFace.family
Is a CSSOMString that contains the family of the font. It is equivalent to the font-family descriptor.
FontFace.style
Is a CSSOMString that contains the style of the font. It is equivalent to the font-style descriptor.
FontFace.weight
Is a CSSOMString that contains the weight of the font. It is equivalent to the font-weight descriptor.
FontFace.stretch
Is a CSSOMString that contains how the font stretches. It is equivalent to the font-stretch descriptor.
FontFace.unicodeRange
Is a CSSOMString that contains the range of code encompassed the font. It is equivalent to the unicode-range descriptor.
FontFace.variant
Is a CSSOMString that contains the variant of the font. It is equivalent to the font-variant descriptor.
FontFace.featureSettings
Is a CSSOMString that contains the features of the font. It is equivalent to the font-feature-settingsdescriptor.
FontFace.status Read only
Returns an enumerated value indicating the status of the font. It can be one of the following: "unloaded", "loading", "loaded", or "error".
FontFace.loaded Read only
Returns a Promise to a FontFace that fulfills when the font is completely loaded and rejects when an error happens.

Methods

This interface doesn't inherit any method.

FontFace.load()
Loads the font, returning a Promise to a FontFace that fulfills when the font is completely loaded and rejects when an error happens.

Specifications

Specification Status Comment
CSS Font Loading Module Level 3
The definition of 'FontFaceSet' in that specification.
Working Draft Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support35 ?41 ? ? ?
FontFace() constructor35 ?41 ? ? ?
display60 ? No ?47 No
family Yes ? ? ? Yes ?
style ? ? ? ? ? ?
weight ? ? ? ? ? ?
stretch ? ? ? ? ? ?
unicodeRange ? ? ? ? ? ?
variant ? ? ? ? ? ?
featureSettings ? ? ? ? ? ?
status ? ? ? ? ? ?
loaded ? ? ? ? ? ?
load ? ? ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3535 ?41 ? ? ?
FontFace() constructor3535 ?41 ? ? ?
display6060 ? No47 No ?
family Yes Yes ? ? Yes ? ?
style ? ? ? ? ? ? ?
weight ? ? ? ? ? ? ?
stretch ? ? ? ? ? ? ?
unicodeRange ? ? ? ? ? ? ?
variant ? ? ? ? ? ? ?
featureSettings ? ? ? ? ? ? ?
status ? ? ? ? ? ? ?
loaded ? ? ? ? ? ? ?
load ? ? ? ? ? ? ?

Document Tags and Contributors

Contributors to this page: fscholz, jakkrobbit, jpmedley, jsx, Alhadis, teoli
Last updated by: fscholz,