Web/API/FontFace

This is an experimental technologyCheck 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 3The definition of 'FontFace' in that specification.	Working Draft	Initial definition

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
FontFace	Chrome Full support 35	Edge Full support 79	Firefox Full support 41	IE No support No	Opera Full support 22	Safari Full support 10	WebView Android Full support 37	Chrome Android Full support 35	Firefox Android Full support 41	Opera Android Full support 22	Safari iOS Full support 10	Samsung Internet Android Full support 4.0
FontFace() constructor	Chrome Full support 35	Edge Full support 79	Firefox Full support 41	IE No support No	Opera Full support 22	Safari Full support 10	WebView Android Full support 37	Chrome Android Full support 35	Firefox Android Full support 41	Opera Android Full support 22	Safari iOS Full support 10	Samsung Internet Android Full support 4.0
display Experimental'	Chrome Full support 60	Edge Full support 79	Firefox Full support 58	IE No support No	Opera Full support 47	Safari Full support 11	WebView Android Full support 60	Chrome Android Full support 60	Firefox Android No support No	Opera Android Full support 44	Safari iOS No support No	Samsung Internet Android Full support 8.0
family Experimental'	Chrome Full support 35	Edge Full support 79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support 10	WebView Android Full support 37	Chrome Android Full support 35	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 4.0
featureSettings Experimental'	Chrome Full support 35	Edge Full support 79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support 10	WebView Android Full support 37	Chrome Android Full support 35	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung 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 79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support 10	WebView 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 Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung 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 79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support 10	WebView 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 Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung 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 35	Edge Full support 79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support 10	WebView Android Full support 37	Chrome Android Full support 35	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 4.0
stretch Experimental'	Chrome Full support 35	Edge Full support 79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support 10	WebView Android Full support 37	Chrome Android Full support 35	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 4.0
style Experimental'	Chrome Full support 35	Edge Full support 79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support 10	WebView Android Full support 37	Chrome Android Full support 35	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 4.0
unicodeRange Experimental'	Chrome Full support 35	Edge Full support 79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support 10	WebView Android Full support 37	Chrome Android Full support 35	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 4.0
variant Experimental'	Chrome Full support 35	Edge Full support 79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support 10	WebView Android Full support 37	Chrome Android Full support 35	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 4.0
weight Experimental'	Chrome Full support 35	Edge Full support 79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support 10	WebView Android Full support 37	Chrome Android Full support 35	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 4.0
Available in workers	Chrome Full support 69	Edge Full support 79	Firefox ?	IE No support No	Opera ?	Safari ?	WebView Android Full support 69	Chrome Android Full support 69	Firefox 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

• @font-face

FontFace by Mozilla Contributors is licensed under CC-BY-SA 2.5.