CSSFontFaceRule

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.

Learn more
See full compatibility

The CSSFontFaceRule interface of the CSS Object Model (CSSOM) represents an @font-face at-rule.

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}`);
  }
}

Result

Specifications

Specification
CSS Fonts Module Level 4 # om-fontface

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

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