React应用字体设置异常：仅部分文本显示指定字体，无法全局改为Helvetica

1. 提升全局样式优先级，覆盖所有元素 #

部分文本不生效通常是因为组件自带的字体样式优先级更高，直接用全局选择器兜底：

/* 最直接的方式，覆盖所有元素 */
html, body, * {
  font-family: 'Helvetica', sans-serif !important;
}

如果不想用!important，可以通过根组件选择器提高优先级：

#root * {
  font-family: 'Helvetica', sans-serif;
}

把这段代码放在全局样式文件（比如index.css或App.css）最顶部，确保加载顺序优先。

2. 确认Helvetica字体可正常加载 #

如果是自定义引入的Helvetica字体文件，先在全局CSS中声明字体：

@font-face {
  font-family: 'Helvetica';
  src: url('./assets/fonts/Helvetica-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
/* 可选：添加粗体、斜体等变体 */
@font-face {
  font-family: 'Helvetica';
  src: url('./assets/fonts/Helvetica-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

注意检查字体文件路径是否正确，确保打包工具（比如webpack、Vite）能正确识别并打包字体资源。

3. 修改UI组件库的主题配置 #

如果用了Ant Design、Material UI这类组件库，它们自带默认字体，需要修改主题配置统一字体：

Ant Design示例 #

import { ConfigProvider } from 'antd';

function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          fontFamily: 'Helvetica, sans-serif',
        },
      }}
    >
      {/* 应用所有内容 */}
    </ConfigProvider>
  );
}

Material UI示例 #

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

const customTheme = createTheme({
  typography: {
    fontFamily: 'Helvetica, sans-serif',
  },
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 应用所有内容 */}
    </ThemeProvider>
  );
}

4. 排查行内样式和自定义组件 #

检查项目中有没有组件直接写了行内fontFamily样式，这种会直接覆盖全局样式，需要手动修改这些组件的样式，或者用CSS优先级更高的选择器覆盖。

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