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- A
CSSOMStringthat determines how a font face is displayed based on whether and when it is downloaded and ready to use. FontFace.family- A
CSSOMStringthat retrieves or sets the family of the font. It is equivalent to thefont-familydescriptor. FontFace.featureSettings- A
CSSOMStringthat retrieves or sets infrequently used font features that are not available from a font's variant properties. It is equivalent to thefont-feature-settingsdescriptor. FontFace.loadedRead only- Returns a
Promisethat resolves with the currentFontFaceobject when the font specified in the object's constructor is done loading or rejects with aSyntaxError. FontFace.statusRead only- Returns an enumerated value indicating the status of the font, one of
"unloaded","loading","loaded", or"error". FontFace.stretch- A
CSSOMStringthat retrieves or sets how the font stretches. It is equivalent to thefont-stretchdescriptor. FontFace.style- A
CSSOMStringthat retrieves or sets the style of the font. It is equivalent to thefont-styledescriptor. FontFace.unicodeRange- A
CSSOMStringthat retrieves or sets the range of unicode codepoints encompassing the font. It is equivalent to theunicode-rangedescriptor. FontFace.variant- A
CSSOMStringthat retrieves or sets the variant of the font. It is equivalent to thefont-variantdescriptor. FontFace.weight- A
CSSOMStringthat contains the weight of the font. It is equivalent to thefont-weightdescriptor.
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
Promisethat 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
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.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
FontFace | Chrome Full support 35 | Edge Full support 79 | Firefox Full support 41 | IE ? | 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 ? | 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 | Chrome Full support 60 | Edge Full support 79 | Firefox Full support 58 | IE ? | 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 | Chrome Full support 35 | Edge Full support 79 | Firefox Full support Yes | IE ? | 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 | Chrome Full support 35 | Edge Full support 79 | Firefox Full support Yes | IE ? | 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 | Chrome
Full support
45
| Edge Full support 79 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support 10 | WebView Android
Full support
45
| Chrome Android
Full support
45
| Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android
Full support
5.0
|
loaded | Chrome
Full support
45
| Edge Full support 79 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support 10 | WebView Android
Full support
45
| Chrome Android
Full support
45
| Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android
Full support
5.0
|
status | Chrome Full support 35 | Edge Full support 79 | Firefox Full support Yes | IE ? | 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 | Chrome Full support 35 | Edge Full support 79 | Firefox Full support Yes | IE ? | 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 | Chrome Full support 35 | Edge Full support 79 | Firefox Full support Yes | IE ? | 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 | Chrome Full support 35 | Edge Full support 79 | Firefox Full support Yes | IE ? | 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 | Chrome Full support 35 | Edge Full support 79 | Firefox Full support Yes | IE ? | 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 | Chrome Full support 35 | Edge Full support 79 | Firefox Full support Yes | IE ? | 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 ? | 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.
