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
FontFaceobject, built from an external resource described by an URL or from anArrayBuffer.
Properties
This interface doesn't inherit any property.
FontFace.display- Is a
CSSOMStringthat determines how a font face is displayed based on whether and when it is downloaded and ready to use. FontFace.family- Is a
CSSOMStringthat contains the family of the font. It is equivalent to thefont-familydescriptor. FontFace.style- Is a
CSSOMStringthat contains the style of the font. It is equivalent to thefont-styledescriptor. FontFace.weight- Is a
CSSOMStringthat contains the weight of the font. It is equivalent to thefont-weightdescriptor. FontFace.stretch- Is a
CSSOMStringthat contains how the font stretches. It is equivalent to thefont-stretchdescriptor. FontFace.unicodeRange- Is a
CSSOMStringthat contains the range of code encompassed the font. It is equivalent to theunicode-rangedescriptor. FontFace.variant- Is a
CSSOMStringthat contains the variant of the font. It is equivalent to thefont-variantdescriptor. FontFace.featureSettings- Is a
CSSOMStringthat contains the features of the font. It is equivalent to thefont-feature-settingsdescriptor. FontFace.statusRead only- Returns an enumerated value indicating the status of the font. It can be one of the following:
"unloaded","loading","loaded", or"error". FontFace.loadedRead only- Returns a
Promiseto aFontFacethat 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
Promiseto aFontFacethat 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 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.
| Feature | 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 | ? | ? | ? | ? | ? | ? |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | 35 | 35 | ? | 41 | ? | ? | ? |
FontFace() constructor | 35 | 35 | ? | 41 | ? | ? | ? |
display | 60 | 60 | ? | No | 47 | No | ? |
family | Yes | Yes | ? | ? | Yes | ? | ? |
style | ? | ? | ? | ? | ? | ? | ? |
weight | ? | ? | ? | ? | ? | ? | ? |
stretch | ? | ? | ? | ? | ? | ? | ? |
unicodeRange | ? | ? | ? | ? | ? | ? | ? |
variant | ? | ? | ? | ? | ? | ? | ? |
featureSettings | ? | ? | ? | ? | ? | ? | ? |
status | ? | ? | ? | ? | ? | ? | ? |
loaded | ? | ? | ? | ? | ? | ? | ? |
load | ? | ? | ? | ? | ? | ? | ? |