Combine css variables into one variable

Question

I'm trying to combine/compose multiple css variables into one that I can use but it doesn't seem to be working. In particular I'm trying to combine separate font rules into one where I can then use the font shorthand.

Here is the pertinent part of my variable declarations on root:

:root {
    --Font-Family-Regular: 'my-custom-web-font', verdana, sans-serif;
    --Font-Family-Regular-Weight: 400;
    --Font-Family-Regular-Style: normal;

    --Body-Font:
        var(--Font-Family-Regular-Style)
        var(--Font-Family-Regular-Weight)
        var(--Font-Family-Regular);
    }
}

Then in my css I reference the css variable where I combining other variables:

body {
  font: var(--Body-Font);
}

But I don't get my web font as I would expect. Is combining/composing like this not possible?

The web fonts are loading fine. If I reference a font family variable on a font-family property, it all works fine. I have regular/bold/semi-bold/italic versions all working with single css variables for each, I'm just trying to combine the family, weight and style into one variable.

the font-size part is mandatory

Temani Afif
– Temani Afif

2025-02-21 20:42:27 +00:00
Commented Feb 21 at 20:42 — Temani Afif
– Temani Afif, Commented Feb 21 at 20:42

A Haworth · Accepted Answer · 2025-02-21 20:46:49Z

2

There are some fairly strict rules about the order in which you have to place the values for font:

AND you must include a the font-size. AND some values must come before the font-size.

See https://developer.mozilla.org/en-US/docs/Web/CSS/font for details.

Here is an example using your CSS, (with bold weight chosen so we can see it's been applied).

<style>
  :root {
    --Font-Family-Regular: 'my-custom-web-font', verdana, sans-serif;
    --Font-Family-Regular-Weight: bold;
    --Font-Family-Regular-Style: normal;

    --Body-Font: var(--Font-Family-Regular-Style) var(--Font-Family-Regular-Weight) 72px var(--Font-Family-Regular);
  }


  body {
    font: var(--Body-Font);
  }
</style>

<body>some text</body>

answered Feb 21 at 20:46

A Haworth

37.5k4 gold badges17 silver badges17 bronze badges

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

1 Comment

magenta placenta Feb 21 at 21:04

Thanks, looks like I was missing the size. Added that variable and it's working as I would have expected.

Aaron Meese · Accepted Answer · 2025-02-22 21:20:18Z

-1

You have to ensure the correct order. Order matters.

font-style, font-weight, font-size, font-family.

edited Feb 22 at 21:20

Aaron Meese

2,3537 gold badges30 silver badges48 bronze badges

answered Feb 21 at 19:50

Mahesh

111 bronze badge

1 Comment

magenta placenta Feb 21 at 21:05

Not sure why you were down voted. I was missing the size from my shorthand. Added it and is working now.

Collectives™ on Stack Overflow

Combine css variables into one variable

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related