GeezerVison is showing developer.mozilla.org — CSSFontFaceRule - Web APIs | MDN
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.
Inherits methods from its ancestor CSSRule.
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;
}
JavaScript
const logElement = document.querySelector("#log");
function log(text) {
logElement.innerText = `${logElement.innerText}${text}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
js
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