{{APIRef("CSS Font Loading API")}}{{SeeCompatTable}}
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
- {{domxref("FontFace.FontFace", "FontFace()")}}
- Constructs and returns a new
FontFace
object, built from an external resource described by an URL or from an {{domxref("ArrayBuffer")}}.
Properties
This interface doesn't inherits any property.
- {{domxref("FontFace.family")}}
- Is a {{domxref("DOMString")}} that contains the family of the font. It is equivalent to the {{cssxref("@font-face/family", "family")}} descriptor.
- {{domxref("FontFace.style")}}
- Is a {{domxref("DOMString")}} that contains the style of the font. It is equivalent to the {{cssxref("@font-face/style", "style")}} descriptor.
- {{domxref("FontFace.weight")}}
- Is a {{domxref("DOMString")}} that contains the weight of the font. It is equivalent to the {{cssxref("@font-face/weight", "weight")}} descriptor.
- {{domxref("FontFace.stretch")}}
- Is a {{domxref("DOMString")}} that contains how the font stretches. It is equivalent to the {{cssxref("@font-face/stretch", "stretch")}} descriptor.
- {{domxref("FontFace.unicodeRange")}}
- Is a {{domxref("DOMString")}} that contains the range of code encompassed the font. It is equivalent to the {{cssxref("@font-face/unicode-range", "unicode-range")}} descriptor.
- {{domxref("FontFace.variant")}}
- Is a {{domxref("DOMString")}} that contains the variant of the font. It is equivalent to the {{cssxref("@font-face/range", "range")}} descriptor.
- {{domxref("FontFace.featureSettings")}}
- Is a {{domxref("DOMString")}} that contains the features of the font. It is equivalent to the {{cssxref("@font-face/feature-settings", "feature-settings")}} descriptor.
- {{domxref("FontFace.status")}} {{readonlyinline}}
- Returns an enumerated value indicating the status of the font. It can be one of the following:
"unloaded"
,"loading"
,"loaded"
, or"error"
. - {{domxref("FontFace.loaded")}} {{readonlyinline}}
- Returns a {{domxref("Promise")}} to a
FontFace
that fulfills when the font is completely loaded and rejects when an error happens.
Methods
This interface doesn't inherits any method.
- {{domxref("FontFace.load()")}}
- Loads the font, returning a {{domxref("Promise")}} to a
FontFace
that fulfills when the font is completely loaded and rejects when an error happens.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('CSS3 Font Loading','#FontFace-interface','FontFaceSet')}} | {{Spec2('CSS3 Font Loading')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatChrome(35.0)}} | {{CompatGeckoDesktop(41)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatChrome(35.0)}} | {{CompatGeckoMobile(41)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatChrome(35.0)}} |