[data grid] Incorrect handling of numeric font size in formatFont

[afn]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/inspiring-sky-4v6vd2

Note the fontSize: 14 in the definition of typography.body2. Changing it to fontSize: '14px' corrects the incorrect behavior.

Current behavior

If fontSize is a number, the --DataGrid-t-typography-font-body variable (and therefore the font attribute) is incorrectly set to 400 14 / 1.43 "Roboto", "Helvetica", "Arial", sans-serif

Expected behavior

The font attribute should be set to 400 14px / 1.43 "Roboto", "Helvetica", "Arial", sans-serif

Context

The bug is in the formatFont function. Instead of interpolating font.fontSize as-is, it should append px if the value is a number, similar to what is done in getRadius.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.5
  Binaries:
    Node: 20.19.0 - ~/.nvm/versions/node/v20.19.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.19.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 140.0.7339.133
    Edge: Not Found
    Safari: 18.5

Search keywords: formatFont px font size fontSize

Order ID: 117263

[inam-dev]

Having the same issue. The font in Data Grid is stuck to a single value since I upgraded to @mui/x-data-grid@8.

Here is a my minimal repo:
https://stackblitz.com/edit/github-4tjrvv2d-k238czaz?file=src%2Ftheme%2Ftypography.ts

• If no body2.fontSize is defined in typography theme settings, root fontSize is respected. But as soon as you use add a body2.fontSize, a fixed font size is used and the body2.fontSize is ignored.
• Even with body2 fontSize present, when you change the root fontSize, it will change the size of checkbox and the table range (1–100 of 100000) but do nothing to the text in the cells.
• If you change package to @mui/x-data-grid@7, the theme settings work as expected. The body2.fontSize is used in cells.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

---

@afn Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.