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 anArrayBuffer
.
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 thefont-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 thefont-feature-settings
descriptor. FontFace.loaded
Read only- Returns a
Promise
that resolves with the currentFontFace
object when the font specified in the object's constructor is done loading or rejects with aSyntaxError
. 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 thefont-stretch
descriptor. FontFace.style
- A
CSSOMString
that retrieves or sets the style of the font. It is equivalent to thefont-style
descriptor. FontFace.unicodeRange
- A
CSSOMString
that retrieves or sets the range of unicode codepoints encompassing the font. It is equivalent to theunicode-range
descriptor. FontFace.variant
- A
CSSOMString
that retrieves or sets the variant of the font. It is equivalent to thefont-variant
descriptor. FontFace.weight
- A
CSSOMString
that contains the weight of the font. It is equivalent to thefont-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 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.