Kevin Powell - Community•2y ago

Body - font-feature-settings question.

Imagine you have 2 different variable fonts and want to set different font-feature-settings on body for those 2 fonts, how do you go about it without using classes, you don't have to look at browser compatibility and you can use all the latest css but it has to be supported by at least the latest Chrome and Firefox versions, other browsers are irrelevant so you don't have to worry about that. I wonder if that's even possible using stuff like :where, :is... For those who don't know what exactly I mean, here is an example, so I have my body font settings like this and want to apply the font-feature-settings only to the font family assigned to body, without affecting other fonts.

body {
  font-family: 'VariableFont';
  font-feature-settings: "dlig" 1, "frac" 1, "salt" 1, "ss03" 1, "ss04" 1;
}

body {
  font-family: 'VariableFont';
  font-feature-settings: "dlig" 1, "frac" 1, "salt" 1, "ss03" 1, "ss04" 1;
}

I guess my problem will be easily solved in the future, but right now setting this up in @font-face itself is sadly only supported by firefox. https://caniuse.com/mdn-css_at-rules_font-face_font-feature-settings

1 Reply

WebMechanic•2y ago

want to apply the font-feature-settings only to the font family assigned to body, without affecting other fonts.

You may still restrict the feature settings to elements that should actually display them i.e. h1, h2, p, li, th, td or some specific context etc. You can use individual CSS custom props for every "feature" and set (unset) them in selectors where you (don't) want them to be applied.

body {
--ligatures: "dlig" 1, ; /* with comma */
font-feature-settings: var(--ligatures) "frac" 1, "salt" 1, "ss03" 1, "ss04" 1;
}
h2 {
  --ligatures: ; /* just empty */
}

body {
--ligatures: "dlig" 1, ; /* with comma */
font-feature-settings: var(--ligatures) "frac" 1, "salt" 1, "ss03" 1, "ss04" 1;
}
h2 {
  --ligatures: ; /* just empty */
}

Gaming

Programming

Body - font-feature-settings question.