Steps to reproduce

Steps:

1. Follow steps in https://mui.com/material-ui/integrations/nextjs/#font-optimization

   'use client';
   import { createTheme } from '@mui/material/styles';
   
   const theme = createTheme({
     typography: {
       fontFamily: 'var(--font-roboto)',
     },
   });
   
   export default theme;

2. Notice the letter-spacing is off in Typography components

Current behavior

Switching between the two:

Expected behavior

No response

Context

Noticed this in mui/mui-public#1020

Caused by

The fontFamily is set to 'var(--font-roboto)' and therefore doesn't correspond to the default fontfamily, therefore the letter-spacing intended for roboto is not applied, yet the font is roboto.

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: next/font letter-spacing