W3cubDocs

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-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 compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	35	?	41	?	?	?
`FontFace()` constructor	35	?	41	?	?	?
`display`	60	?	No	?	47	No
`family`	Yes	?	?	?	Yes	?
`style`	?	?	?	?	?	?
`weight`	?	?	?	?	?	?
`stretch`	?	?	?	?	?	?
`unicodeRange`	?	?	?	?	?	?
`variant`	?	?	?	?	?	?
`featureSettings`	?	?	?	?	?	?
`status`	?	?	?	?	?	?
`loaded`	?	?	?	?	?	?
`load`	?	?	?	?	?	?

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	37	35	?	41	?	?	?
`FontFace()` constructor	37	35	?	41	?	?	?
`display`	60	60	?	No	47	No	?
`family`	Yes	Yes	?	?	Yes	?	?
`style`	?	?	?	?	?	?	?
`weight`	?	?	?	?	?	?	?
`stretch`	?	?	?	?	?	?	?
`unicodeRange`	?	?	?	?	?	?	?
`variant`	?	?	?	?	?	?	?
`featureSettings`	?	?	?	?	?	?	?
`status`	?	?	?	?	?	?	?
`loaded`	?	?	?	?	?	?	?
`load`	?	?	?	?	?	?	?

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/FontFace