Material-UI中添加自托管Raleway字体失败，求助排查配置问题

你在配置自定义字体时踩了几个容易忽略的坑，我帮你梳理下问题点和对应的修正方案：

1. 主题结构层级错误 #

你把typography配置嵌套在了palette对象里，这是核心错误！typography是createMuiTheme的顶层配置属性，需要和palette、overrides同级，否则Material-UI无法正确读取你设置的 fontFamily。

修正后的createMuiTheme代码： #

import * as fonts from './fonts';
import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    // 你的调色板配置...
  },
  typography: { // 移到顶层，与palette同级
    fontFamily: 'Raleway, Arial',
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [fonts.raleway],
      },
    },
  },
});

2. 字体格式与导入文件不匹配 #

你导入的是Raleway-Regular.ttf文件，但在font-face的src里写的是format('woff2')，这会导致浏览器无法正确解析字体文件。TTF格式对应的格式值应该是truetype。

修正后的src/fonts/index.js： #

import RalewayRegular from './Raleway-Regular.ttf';

export const raleway = {
  fontFamily: 'Raleway',
  fontStyle: 'normal',
  fontDisplay: 'swap',
  fontWeight: 400,
  src: `
    local('Raleway'),
    local('Raleway-Regular'),
    url(${RalewayRegular}) format('truetype') // 修正为truetype
  `,
  unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
};

3. 确保引入CssBaseline组件 #

你已经在overrides里配置了MuiCssBaseline的全局@font-face规则，但如果根组件中没有渲染<CssBaseline />，这些全局样式就不会生效。需要在你的App.js（或根组件）中添加：

import { CssBaseline } from '@material-ui/core';

function App() {
  return (
    <>
      <CssBaseline />
      {/* 你的其他组件内容 */}
    </>
  );
}

4. 额外验证点 #

• 检查Webpack打包后，字体文件是否正确输出到了fonts/目录，可通过浏览器开发者工具的「网络」面板查看字体文件是否成功加载（无404错误）。
• 打印theme对象时，确认theme.typography.fontFamily已正确设置为Raleway, Arial。

修正完这些点后重新打包运行，你的自定义Raleway字体应该就能正常生效了。

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