CSS Custom variables --font-[variant] isn't computed for CSS "font" property when using NextJs Font Optimisation

[IshfaqAhmedProg]

Steps to reproduce

1. Create a new next js project and configure it as per the Next.js integration docs
2. Add sx={ { font: "var(--font-body2)" } } to a Typography component.
3. The font property computed value is empty.
4. Now add the value of the --font-body2 directly sx={ { font: "400 0.875rem/1.43 var(--font-roboto)" } }
5. font property value is computed correctly.

Current behavior

font property value is not being computed when the font family is also a variable if css variables --font-[variant] is used

Expected behavior

The --font-[variant] css variables should have the computed value of the font-family instead of variable, so that font property can be computed.

Context

In the sample project i tried using both single and multiple font-family variables, but it doesnt compute unless the font-family variable is explicitly mentioned.

This doesnt work

This works

Your environment

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.15.4 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (129.0.2792.89)
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0
    @emotion/styled: ^11.14.0 => 11.14.0
    @mui/icons-material: ^6.4.7 => 6.4.7
    @mui/material: ^6.4.7 => 6.4.7
    @mui/material-nextjs: ^6.4.3 => 6.4.3
    @types/react: ^19 => 19.0.10
    react: ^19.0.0 => 19.0.0
    react-dom: ^19.0.0 => 19.0.0
    typescript: ^5 => 5.8.2

Search keywords: font css variables custom properties --font-[]

[siriwatknp]

Please share a reproducible sandbox.