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

MonstraG commented 3 months ago

Steps to reproduce

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

Steps:

take https://github.com/mui/material-ui/tree/next/examples/joy-ui-nextjs-ts
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 https://github.com/mui/material-ui/issues/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 commented 3 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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

MonstraG commented 2 months ago

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 commented 2 months ago

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

mui / material-ui