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

# FontFace

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-settings`descriptor.
`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
The definition of 'FontFaceSet' in that specification.
Working Draft Initial definition

## Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support35 ?41 ? ? ?
`FontFace()` constructor35 ?41 ? ? ?
`display`60 ? 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 ? ? ?
`display`6060 ? No47 No ?
`family` Yes Yes ? ? Yes ? ?
`style` ? ? ? ? ? ? ?
`weight` ? ? ? ? ? ? ?
`stretch` ? ? ? ? ? ? ?
`unicodeRange` ? ? ? ? ? ? ?
`variant` ? ? ? ? ? ? ?
`featureSettings` ? ? ? ? ? ? ?
`status` ? ? ? ? ? ? ?
`loaded` ? ? ? ? ? ? ?
`load` ? ? ? ? ? ? ?

Tags: