The fontFamily
property of the CSSConditionRule
interface represents the name of the font family it applies to.
On this page
CSSFontFeatureValuesRule: fontFamily property
Value
A string.
Examples
Read font family
In this example, we declare two @font-feature-values
one for the Font One font family, and the other for Font Two. We then use the CSSOM to read these font families, displaying them into the log.
html
<pre id="log"></pre>
CSS
css
/* At-rule for "nice-style" in Font One */
@font-feature-values Font One {
@styleset {
nice-style: 12;
}
}
/* At-rule for "nice-style" in Font Two */
@font-feature-values Font Two {
@styleset {
nice-style: 4;
}
}
/* Apply the at-rules with a single declaration */
.nice-look {
font-variant-alternates: styleset(nice-style);
}
JavaScript
js
const log = document.getElementById("log");
const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const fontOne = rules[0]; // A CSSFontFeatureValuesRule
log.textContent = `The 1st '@font-feature-values' family: "${fontOne.fontFamily}".\n`;
const fontTwo = rules[1]; // Another CSSFontFeatureValuesRule
log.textContent += `The 2nd '@font-feature-values' family: "${fontTwo.fontFamily}".`;
Specifications
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
fontFamily |
111 | 111 | 34 | No | 97 | 16.2 | 111 | 111 | 34 | No | 16.2 | 22.0 |
See also
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSFontFeatureValuesRule/fontFamily