[joy-ui][Checkbox] Not using the correct font in the Next.js example

[MonstraG]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/github-esh8an?file=src%2Fapp%2Fpage.tsx

Steps:

1. take https://github.com/mui/material-ui/tree/next/examples/joy-ui-nextjs-ts
2. add a Checkbox

Current behavior

Checkbox has wrong font, in my case MS Shell Dig 2:

Expected behavior

It has Inter font like everything else.

Context

I copied https://github.com/mui/material-ui/tree/next/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry because #38082 is not there yet, and found this issue.

I did not test a lot of other components to see if this is checkbox-only issue, but text and buttons work.

Your environment

npx @mui/envinfo

System:
OS: Windows 11 10.0.22631
Binaries:
Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.15.5 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Chrome: Not Found
Edge: Chromium (123.0.2420.65)
Firefox: 125.0b6 (64-bit)
npmPackages:
@emotion/react: 11.11.4 => 11.11.4
@emotion/styled: 11.11.5 => 11.11.5
@mui/base: 5.0.0-beta.40 => 5.0.0-beta.40
@mui/icons-material: 5.15.14 => 5.15.14
@mui/joy: 5.0.0-beta.32 => 5.0.0-beta.32
@mui/system: ^5.15.14 => 5.15.14
@types/react: 18.2.73 => 18.2.73
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: 5.4.3 => 5.4.3

Search keywords: font next.js Inter Checkbox theme font-family

[danilo-leal]

Hey! 👋 Thanks for opening this issue; seeing Joy UI usage is awesome! Just passing by to share that the team might take a bit longer to get back to Joy UI-related issues due to the focus on the two major releases coming up for Material UI. Didn’t want to leave issues with the “waiting maintainer” status forever :) Definitely feel free to share any progress you’ve had on the issue, if any, though!

[RyanScott96]

Hi, I am not associated with the project, but I was unable to replicate your issue; i.e. utilizing a checkbox shows a font-family of Inter, using the provided template, at least in Firefox.

If you have made changes to the theme.ts file, make sure that you have included the font-family portion of the extendTheme function, setting at least body (there are options for body, display, code, and fallback but I believe checkbox references body) to a handle for the Inter font-family, e.g.:

const inter = Inter({
  subsets: ['latin'],
  adjustFontFallback: false, // prevent NextJS from adding its own fallback font
  fallback: ['var(--joy-fontFamily-fallback)'], // use Joy UI's fallback font
  display: 'swap',
});

const theme = extendTheme({
  fontFamily: {
    body: inter.style.fontFamily,
  },
});

If you have made changes to the CSSVarsProvider in the ThemeRegistry component, please make sure that you are still setting the theme attribute to the one above, e.g.:

<CssVarsProvider theme={theme}> ... </CssVarsProvide>

Hope this helps

[MonstraG]

Hi, I am not associated with the project, but I was unable to replicate your issue; i.e. utilizing a checkbox shows a font-family of Inter, using the provided template, at least in Firefox.

If you have made changes to the theme.ts file...
If you have made changes to the CSSVarsProvider in the ThemeRegistry component...

Hmm, very interesting. I did neither, I just clicked on

https://stackblitz.com/github/mui/material-ui/tree/next/examples/joy-ui-nextjs-ts

and added

import Checkbox from '@mui/joy/Checkbox';

<Checkbox label="I'm a checkbox, but I'm not in Inter" />

Does the stackblitz link at the start of the issue render the font correctly for you?

[RyanScott96]

Stackblitz fails for me altogether, sadly. Perhaps it is an issue with running the project in Stackblitz?

[MonstraG]

Stackblitz fails for me altogether, sadly. Perhaps it is an issue with running the project in Stackblitz?

Try codesandbox, issue reproduces there also:
https://codesandbox.io/p/devbox/checkbox-not-using-the-correct-font-in-the-next-js-example-fw8nmj?file=%2Fsrc%2Fapp%2Fpage.tsx%3A20%2C9

[RyanScott96]

Loaded the provided codesandbox, but it appears to be using the expected font for the checkbox label:
font-family: "__Inter_918210", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
I got this from the computed stlyes via the debug element inspector. It also visually appears correct.

Edit/P.S.: I will note that the checkbox itself appears to have a font-family of cantarell for whatever reason, but all actual text seems correct