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 returns a CSSFontFaceDescriptors object representing the descriptors available in the @font-face rule's body.

Value

A CSSFontFaceDescriptors object.

Although the style property itself is read-only in the sense that you can't replace the CSSFontFaceDescriptors object, you can still assign to the style property directly, which is equivalent to assigning to its cssText property. You can also modify the CSSFontFaceDescriptors object using the setProperty() and removeProperty() methods.

Examples

Basic usage

This example defines a @font-face rule and then uses CSSFontFaceDescriptors to read back the descriptor values.

CSS

css

@font-face {
  font-family: "MyHelvetica";
  src:
    local("Helvetica Neue Bold"),
    local("HelveticaNeue-Bold"),
    url("MgOpenModernaBold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

#log {
  height: 200px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

<pre id="log"></pre>

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

const myRules = document.getElementById("css-output").sheet.cssRules;
for (const rule of myRules) {
  if (rule instanceof CSSFontFaceRule) {
    const descriptors = rule.style;
    if (descriptors instanceof CSSStyleDeclaration) {
      log(`rule.style is a CSSStyleDeclaration.`);
    } else {
      log(`rule.style is a CSSFontFaceDescriptors.`);
    }
    log("Descriptors:");
    log(` font-family: ${descriptors.fontFamily}`);
    log(` src: ${descriptors.src}`);
    log(` font-weight: ${descriptors["font-weight"]}`);
    log(` font-style: ${descriptors.fontStyle}`);
    log(` font-display: ${descriptors["font-display"]}`);
  }
}

Result

Specifications

Specification
CSS Fonts Module Level 4 # dom-cssfontfacerule-style

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Apr 17, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content