Override Antd global font

Question

I wouldl like to override the Antd 5.1.2 global font but can't find any documentation on how to do so.

I've added Mulish to my app using the @fontsource/mulish dependency. I then import it like so:

import "@fontsource/mulish";

I've then tried enabling the font

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

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

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

but these get overridden by antd.

What is the correct method of overridding the global antd font?

Answer 1

You can use customize-theme. There is a SeedToken named fontFamily, set it to Mulish in the theme.token property of the ConfigProvider component.

import { ConfigProvider, Typography } from "antd";

export default function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          fontFamily: "Mulish"
        }
      }}
    >
      <Typography.Text>Hello World!</Typography.Text>
    </ConfigProvider>
  );
}

Output:

codesandbox