CSSFontFaceRule

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since July 2015.

Learn more
See full compatibility

The CSSFontFaceRule interface represents an @font-face at-rule.

CSSRule CSSFontFaceRule

Instance properties

Inherits properties from its ancestor CSSRule.

CSSFontFaceRule.style Read only: Returns a CSSFontFaceDescriptors object that allows reading and setting the descriptors of the associated @font-face at-rule.

Instance methods

Inherits methods from its ancestor CSSRule.

Examples

Accessing @font-face properties

This example defines a @font-face rule and then iterates over the rules on the page until the associated CSSFontFaceRule is found. It then logs some of the properties.

CSS

css

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

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

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

JavaScript

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

const myRules = document.getElementById("css-output").sheet.cssRules;
for (const rule of myRules) {
  if (rule instanceof CSSFontFaceRule) {
    log(`this: ${rule}`);
    log(` cssText: ${rule.cssText}`);
    log(` parentRule: ${rule.parentRule}`);
    log(` parentStyleSheet: ${rule.parentStyleSheet}`);
    log(` type: ${rule.type}`);
    log(` style: ${rule.style}`);
  }
}