CSSFontFaceRule: style property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The read-only style property of the CSSFontFaceRule interface contains a CSSStyleDeclaration object representing the descriptors available in the @font-face rule's body.
Value
A CSSStyleDeclaration object.
Although the style property itself is read-only in the sense that you can't replace the CSSStyleDeclaration object, you can still assign to the style property directly, which is equivalent to assigning to its cssText property. You can also modify the CSSStyleDeclaration object using the setProperty() and removeProperty() methods.
Examples
This example uses the CSS found as an example on the @font-face page. The first CSSRule returned will be a CSSFontFaceRule. The style property returns a CSSStyleDeclaration with the properties fontFamily, fontWeight, and src populated with the information from the rule.
@font-face {
font-family: "MyHelvetica";
src:
local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url("MgOpenModernaBold.ttf");
font-weight: bold;
}
const myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].style); // A CSSStyleDeclaration
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # dom-cssfontfacerule-style |