如何正确覆盖Antd 5.1.2全局字体？已引入Mulish但被覆盖

架构老林

2026-8-5

如何覆盖Ant Design 5.1.2的全局字体？

问题背景

已通过@fontsource/mulish引入Mulish字体（import "@fontsource/mulish";），尝试通过自定义CSS设置全局字体，但样式被Antd覆盖：

@font-face {
    font-family: "Mulish" !important;
}

:root{
     font-family: "Mulish", serif !important;
}

body{
    font-family: "Mulish", serif !important;
}

正确解决方案

方法1：使用Antd主题Token配置（推荐）

Antd 5基于Token系统，直接通过ConfigProvider配置全局字体是最可靠的方式，不会被组件内样式覆盖：

import { ConfigProvider } from 'antd';
import "@fontsource/mulish"; // 保持字体引入

function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          fontFamily: '"Mulish", serif', // 配置全局字体
        },
      }}
    >
      {/* 你的应用所有内容都放在这里 */}
    </ConfigProvider>
  );
}

export default App;

如果需要覆盖细分场景的字体（如代码块、标记文本），可补充配置对应Token：

theme={{
  token: {
    fontFamily: '"Mulish", serif',
    fontFamilyCode: '"Mulish", monospace',
    fontFamilyMarker: '"Mulish", sans-serif',
  },
}}

方法2：提升CSS优先级

如果不想用主题配置，可通过更具体的选择器或调整样式加载顺序来覆盖：

调整样式加载顺序：在入口文件中先引入Antd的样式，再引入你的自定义样式：

import 'antd/dist/reset.css'; // Antd 5的基础样式
import "@fontsource/mulish";
import './custom-font.css'; // 自定义样式文件放在最后

使用更具体的选择器：在custom-font.css中针对Antd的全局容器设置字体：

/* 针对Antd绑定的body类 */
body.ant-body {
  font-family: "Mulish", serif !important;
}

/* 覆盖Antd布局组件的字体 */
.ant-layout {
  font-family: "Mulish", serif;
}