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
A CSSOMString that determines how a font face is displayed based on whether and when it is downloaded and ready to use.
FontFace.family
A CSSOMString that retrieves or sets the family of the font. It is equivalent to the font-family descriptor.
FontFace.featureSettings
A CSSOMString that retrieves or sets infrequently used font features that are not available from a font's variant properties. It is equivalent to the font-feature-settings descriptor.
FontFace.loaded Read only
Returns a Promise that resolves with the current FontFace object when the font specified in the object's constructor is done loading or rejects with a SyntaxError.
FontFace.status Read only
Returns an enumerated value indicating the status of the font, one of "unloaded", "loading", "loaded", or "error".
FontFace.stretch
A CSSOMString that retrieves or sets how the font stretches. It is equivalent to the font-stretch descriptor.
FontFace.style
A CSSOMString that retrieves or sets the style of the font. It is equivalent to the font-style descriptor.
FontFace.unicodeRange
A CSSOMString that retrieves or sets the range of unicode codepoints encompassing the font. It is equivalent to the unicode-range descriptor.
FontFace.variant
A CSSOMString that retrieves or sets the variant of the font. It is equivalent to the font-variant descriptor.
FontFace.weight
A CSSOMString that contains the weight of the font. It is equivalent to the font-weight descriptor.

Methods

This interface doesn't inherit any method.

FontFace.load()
Loads a font based on current object's constructor-passed requirements, including a location or source buffer, and returns a Promise that resolves with the current FontFace object.

Specifications

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

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
FontFaceChrome Full support 35Edge Full support 79Firefox Full support 41IE ? Opera Full support 22Safari Full support 10WebView Android Full support 37Chrome Android Full support 35Firefox Android Full support 41Opera Android Full support 22Safari iOS Full support 10Samsung Internet Android Full support 4.0
FontFace() constructorChrome Full support 35Edge Full support 79Firefox Full support 41IE ? Opera Full support 22Safari Full support 10WebView Android Full support 37Chrome Android Full support 35Firefox Android Full support 41Opera Android Full support 22Safari iOS Full support 10Samsung Internet Android Full support 4.0
display
Experimental
Chrome Full support 60Edge Full support 79Firefox Full support 58IE ? Opera Full support 47Safari Full support 11WebView Android Full support 60Chrome Android Full support 60Firefox Android No support NoOpera Android Full support 44Safari iOS No support NoSamsung Internet Android Full support 8.0
family
Experimental
Chrome Full support 35Edge Full support 79Firefox Full support YesIE ? Opera Full support YesSafari Full support 10WebView Android Full support 37Chrome Android Full support 35Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 4.0
featureSettings
Experimental
Chrome Full support 35Edge Full support 79Firefox Full support YesIE ? Opera Full support YesSafari Full support 10WebView Android Full support 37Chrome Android Full support 35Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 4.0
load
Experimental
Chrome Full support 45
Full support 45
No support 35 — 45
Notes
Notes Before Chrome 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
Edge Full support 79Firefox Full support YesIE ? Opera Full support YesSafari Full support 10WebView Android Full support 45
Full support 45
No support 37 — 45
Notes
Notes Before WebView 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
Chrome Android Full support 45
Full support 45
No support 35 — 45
Notes
Notes Before Chrome 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 5.0
Full support 5.0
No support 4.0 — 5.0
Notes
Notes Before Samsung Internet 5.0, the returned promise resolved with void instead of a FontFace object as required by the specification.
loaded
Experimental
Chrome Full support 45
Full support 45
No support 35 — 45
Notes
Notes Before Chrome 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
Edge Full support 79Firefox Full support YesIE ? Opera Full support YesSafari Full support 10WebView Android Full support 45
Full support 45
No support 37 — 45
Notes
Notes Before WebView 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
Chrome Android Full support 45
Full support 45
No support 35 — 45
Notes
Notes Before Chrome 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 5.0
Full support 5.0
No support 4.0 — 5.0
Notes
Notes Before Samsung Internet 5.0, the returned promise resolved with void instead of a FontFace object as required by the specification.
status
Experimental
Chrome Full support 35Edge Full support 79Firefox Full support YesIE ? Opera Full support YesSafari Full support 10WebView Android Full support 37Chrome Android Full support 35Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 4.0
stretch
Experimental
Chrome Full support 35Edge Full support 79Firefox Full support YesIE ? Opera Full support YesSafari Full support 10WebView Android Full support 37Chrome Android Full support 35Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 4.0
style
Experimental
Chrome Full support 35Edge Full support 79Firefox Full support YesIE ? Opera Full support YesSafari Full support 10WebView Android Full support 37Chrome Android Full support 35Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 4.0
unicodeRange
Experimental
Chrome Full support 35Edge Full support 79Firefox Full support YesIE ? Opera Full support YesSafari Full support 10WebView Android Full support 37Chrome Android Full support 35Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 4.0
variant
Experimental
Chrome Full support 35Edge Full support 79Firefox Full support YesIE ? Opera Full support YesSafari Full support 10WebView Android Full support 37Chrome Android Full support 35Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 4.0
weight
Experimental
Chrome Full support 35Edge Full support 79Firefox Full support YesIE ? Opera Full support YesSafari Full support 10WebView Android Full support 37Chrome Android Full support 35Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 4.0
Available in workersChrome Full support 69Edge Full support 79Firefox ? IE ? Opera ? Safari ? WebView Android Full support 69Chrome Android Full support 69Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 10.0

Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

See Also