Custom font doesn't work with css var

[PhotonQuantum]

What version of Tailwind CSS are you using?

For example: v4.1.7

What build tool (or framework if it abstracts the build tool) are you using?

N.A

What version of Node.js are you using?

v22.14.0

What browser are you using?

Firefox

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/Wqb57TyO7w

Describe your issue

As you can see in the example, only --font-mono is correctly set as the provided CSS variable, while --default-mono-font-family is not.

[RobinMalfait]

Hey!

This is because the default text reads the CSS variable from :root, but you define the variable somewhere nested in the tree. So at the time of reading the variable for the default --font-mono it's still the default monospaced value not the new one you set deeply nested.

If you want the default text to be set, hoist the custom font up, e.g. in :root: https://play.tailwindcss.com/AHhxHtJmP7?file=css