将字体栈从SCSS迁移至JSS（css-in-js）遇字体生效问题求助

Looks like you're hitting a common gotcha when migrating font definitions from SCSS to Material UI's JSS system—even though the fonts are downloading, the browser isn't picking them up for rendering. Let's break down the likely issues and fix this step by step:

1. Fix the Font File Paths #

First, double-check the URL paths in your @font-face rules. SCSS resolves paths relative to the .scss file, but JSS (especially in React projects) resolves paths relative to the public directory or compiled output, not your source files.

If you're using Create React App, update the paths to use process.env.PUBLIC_URL to ensure they point correctly to your font assets:

import { createGlobalStyle } from '@mui/material/styles';

const GlobalFontStyles = createGlobalStyle`
  @font-face {
    font-family: 'FooFont';
    // Use PUBLIC_URL to reference assets in the public folder
    src: url(${process.env.PUBLIC_URL}/styles/fonts/FooFont_Rg.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap; // Critical for ensuring fonts render once loaded
  }
  // Add all your other font weights/styles here
  @font-face {
    font-family: 'FooFont';
    src: url(${process.env.PUBLIC_URL}/styles/fonts/FooFont_Bd.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
`;

If your fonts aren't in the public folder, adjust the path or move them there to avoid resolution issues.

2. Use createGlobalStyle Instead of makeStyles for Fonts #

While makeStyles's @global works for some styles, createGlobalStyle is purpose-built for global CSS like @font-face and ensures styles are injected early in the <head> with consistent priority.

Render this global style component at your app's root, wrapped in the ThemeProvider:

import { ThemeProvider, createTheme } from '@mui/material/styles';

// Define your theme with the custom font as default
const theme = createTheme({
  typography: {
    fontFamily: '"FooFont", sans-serif', // Match the font-family name from @font-face
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalFontStyles />
      {/* Rest of your app components */}
    </ThemeProvider>
  );
}

3. Verify Font Priority and Application #

Even if fonts download, the browser might use fallbacks due to:

• A mismatch between the font-family name in @font-face and your theme/components (check for typos or case differences).
• Hardcoded font-family styles on components overriding the global/theme setting.

Use your browser's DevTools to:

1. Check the Network tab to confirm fonts return a 200 status (no 404s).
2. Inspect an element and check the Computed styles tab to verify font-family lists "FooFont" before fallbacks like sans-serif.

4. Add Multiple Font Formats for Compatibility #

To ensure cross-browser support, add modern, smaller formats like WOFF2/WOFF alongside TTF:

@font-face {
  font-family: 'FooFont';
  src: url(${process.env.PUBLIC_URL}/styles/fonts/FooFont_Rg.woff2) format('woff2'),
       url(${process.env.PUBLIC_URL}/styles/fonts/FooFont_Rg.woff) format('woff'),
       url(${process.env.PUBLIC_URL}/styles/fonts/FooFont_Rg.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Once you make these changes, your custom fonts should render correctly instead of falling back to system fonts.

内容的提问来源于stack exchange，提问作者RubbelDieKatz