Draft
This page is not complete.
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The FontFace()
constructor creates a new FontFace
object.
Syntax
var fontFace = new FontFace(family, source, descriptors);
Parameters
- family
- Specifies a name that will be used as the font face value for font properties. Takes the same type of values as the
font-family
descriptor of@font-face
. - source
- The font source. This can be either:
- A URL
- Binary font data
- descriptors Optional
- A set of optional descriptors passed as an object. It can have the following keys:
family
: Familystyle
: Styleweight
: Weightstretch
: StretchunicodeRange
: Unicode rangevariant
: variantfeatureSettings
: Feature settings
Example
async function loadFonts() { const font = new FontFace('myfont', 'url(myfont.woff)'); // wait for font to be loaded await font.load(); // add font to document document.fonts.add(font); // enable font with CSS class document.body.classList.add('fonts-loaded'); }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Font Loading Module Level 3 The definition of 'FontFace Constructor' 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() 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 |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown