MUI主题无法识别已安装Poppins字体的问题求助

1. 修正字体导入语法 #

你当前在.css文件中使用了ES模块的import语法，这是错误的。CSS文件中需要使用原生的@import规则：

@import '@fontsource/poppins/300.css';
@import '@fontsource/poppins/400.css';
@import '@fontsource/poppins/500.css';
@import '@fontsource/poppins/700.css';

如果是在JS/TS入口文件（比如index.js）中导入字体，保留ES模块的import即可，但要确保导入的是正确的文件类型。

2. 验证字体是否成功加载 #

打开浏览器开发者工具的Network标签，筛选「Fonts」分类，刷新页面后确认Poppins的字体文件返回状态码为200。如果未加载：

• 重新执行npm install @fontsource/poppins确保包安装完整
• 检查导入路径是否正确，确认node_modules/@fontsource/poppins下存在对应权重的CSS文件

3. 修正主题字体配置 #

MUI主题中typography.fontFamily需要指定完整的字体栈（包含 fallback 字体），且字体名称若含空格需用引号包裹：

export const electraWaveTheme = extendTheme({
  typography: {
    // 优先使用Poppins， fallback到Roboto和系统无衬线字体
    fontFamily: '"Poppins", "Roboto", sans-serif',
  },
  colorSchemes: {
    light: {
      palette: {
        mode: "light",
        primary: { main: "#f0f" },
        secondary: { main: "#0f0" },
        // ...其他颜色配置
      }
    },
    // 为深色主题配置独立字体示例
    dark: {
      palette: {
        mode: "dark",
        // ...深色主题颜色配置
      },
      typography: {
        fontFamily: '"Open Sans", "Roboto", sans-serif',
      }
    }
  }
});

4. 强制全局字体覆盖（可选） #

若主题配置仍不生效，可在全局CSS中直接设置body的字体：

body {
  font-family: 'Poppins', Roboto, sans-serif !important;
}

5. 多主题动态加载字体 #

如果需要切换主题时自动加载对应字体，可结合useEffect实现动态导入：

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

function App() {
  const [isLightTheme, setIsLightTheme] = useState(true);

  useEffect(() => {
    // 切换主题时加载对应字体
    if (isLightTheme) {
      import('@fontsource/poppins');
    } else {
      import('@fontsource/roboto');
    }
  }, [isLightTheme]);

  const currentTheme = createTheme({
    typography: {
      fontFamily: isLightTheme ? '"Poppins", sans-serif' : '"Roboto", sans-serif',
    },
    colorSchemes: {
      // ...主题颜色配置
    }
  });

  return (
    <ThemeProvider theme={currentTheme}>
      {/* 页面内容 */}
      <button onClick={() => setIsLightTheme(!isLightTheme)}>切换主题</button>
    </ThemeProvider>
  );
}

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