CSS Cascade has no affect on font shorthand if properties have variables as values

Question

Let’s assume we have the following CSS Custom Properties:

// Global CSS
:root {
  --font-weight-500: 500;
  --font-size-350: 14px;
  --font-line-height-500: 20px;
  --font-family-sans: 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif;
  --font-family-primary: var(--font-family-sans);

  --font-body-medium-1: var(--font-weight-500) var(--font-size-350)/var(--font-line-height-500) var(--font-family-primary);
}

And the following web component with an open shadow root.

// Web Component
:host {
  --font-family-primary: “Comic Sans MS”;
  font: var(--font-body-medium-1);
}

Any idea why the font shorthand does not accept any individual property overrides? Every test fails. If the font properties individual properties like font-family have custom properties as their values, the cascade doesn't happen.

From a glance, some of your (indented) custom properties declarations have wrong leading dashes: Em-dash (\u2014) will not work. — myf
– myf, Commented Dec 14, 2023 at 15:59
@myf Just the result of copying from a text doc. It's correct in code. I updated the code description. — Runicode
– Runicode, Commented Dec 14, 2023 at 16:03
Ok well now besides wrong quotes, aren't you supposed to do font: var(--font-body-medium-1); instead of font: var(--font-family-primary);? The later only sets font family and by definition resets all other font properties to implicit (initial) values. — myf
– myf, Commented Dec 14, 2023 at 16:23
Clearly I should have reviewed my code before I posted. Updated to medium-1, which is what I wanted to demonstrate. — Runicode
– Runicode, Commented Dec 14, 2023 at 18:03

Nkemdi Anyiam · Accepted Answer · 2023-12-21 18:10:17Z

3

EDIT: Updated for correct answer

The reason it isn't working is because in CSS, the property values are computed, and then the computed value is inherited. --font-body-medium-1 was already computed in :root, so it's locked into using the custom vars that were also in :root. It can't see the overridden --font-family-primary because it can't reach down into a descendant to read that new value.

As proof, if you copy --font-body-medium-1: var(--font-weight-500) var(--font-size-350)/var(--font-line-height-500) var(--font-family-primary); directly into your :host, you'll see that the override does work. That's because now, font-body-medium-1 is inhereting the other custom vars from :root but can see the new --font-family-primary value.

There is a solution. It would obviously be tedious to copy --font-body-medium-1 everywhere you want to use it, so you can instead define the custom property on every element using the universal selector. You can also remove it from :root since it doesn't accomplish anything there.

// Global CSS
:root {
  --font-weight-500: 500;
  --font-size-350: 14px;
  --font-line-height-500: 20px;
  --font-family-sans: 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif;
  --font-family-primary: var(--font-family-sans);

  /*  --font-body-medium-1: var(--font-weight-500) var(--font-size-350)/var(--font-line-height-500) var(--font-family-primary);  */
}

* {
  --font-body-medium-1: var(--font-weight-500) var(--font-size-350)/var(--font-line-height-500) var(--font-family-primary);
}

// Web Component
:host {
  --font-family-primary: “Comic Sans MS”;
  font: var(--font-body-medium-1);
}

Old answer

The font shorthand must provide values for at least font-size and font-family (and in that order). Your code isn't working because you're only providing a value for the font family—put a font size before it and it should work fine. E.g. font: 16px var(--font-family-primary);.

You can read more about the specifics in the documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/font (just look at the Syntax section).

edited Dec 21, 2023 at 18:10

answered Dec 14, 2023 at 17:45

Nkemdi Anyiam

1,1145 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Runicode Over a year ago

That was an oversight in my example that I have corrected. The problem is I expected font: var(--font-body-medium-1); to have --font-body-medium-1 properties expanded in place so that they could be overriden. That does not seem possible. I'm guessing it has something to do with the order the properties are hoisted/parsed, but I cannot find any mention in any spec about this order. So it seems the only option is to completely redefine --font-body-medium-1 and change the desired sub property.

Nkemdi Anyiam Over a year ago

@Runicode I understand now—it was hard to tell what was actually going on with all the edits. Fortunately, there is a solution to the actual problem you're describing, and I've updated my original answer to include it.

Collectives™ on Stack Overflow

CSS Cascade has no affect on font shorthand if properties have variables as values

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related