[docs] MUI free template has a typo in Typography's theme set up

[wohenjue]

Steps to reproduce

Go to https://github.com/mui/material-ui/blob/v6.1.6/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js.
Line 163 fontFamily: ['"Inter", "sans-serif"'].join(','), should be changed to fontFamily: ["Inter", "sans-serif"].join(','),
Notice how the original array only has one element which is a string.

Current behavior

Browser interprets "Inter", "sans-serif" as the font.

Expected behavior

Browser choose "Inter" or "sans-serif" in that order.

Context

I borrowed the template and found the font doesn't work in chrome/safari but works in edge.

Your environment

chrome, safari render differently from edge

Search keywords: typo

[ZeeshanTamboli]

Yes, the current code is incorrect. However, the expected behavior you mentioned also needs adjusting: CSS-defined generic font-family names like sans-serif shouldn’t be quoted. The browser should apply it as:

font-family: Inter, sans-serif;

To fix this, remove .join(',') and use a simple string:

--- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts
+++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts
@@ -183,7 +183,7 @@ export const getDesignTokens = (mode: PaletteMode) => {
       },
     },
     typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
+      fontFamily: 'Inter, sans-serif',
       h1: {
         fontSize: defaultTheme.typography.pxToRem(48),
         fontWeight: 600,

[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.

Note

@wohenjue How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.