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.

The CSSFontFaceRule interface 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 the rules on the page to the associated CSSFontFaceRule. 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