Antd - Override the global font

Question

I would like to override the global Antd font. I've found a few examples but the Antd styling is always taking precedence.

In the top level component (App.tsx) I'm importing an scss file. This file is being loaded correctly as I can see the style being overridden when inspecting the page.

app.scss

@font-face {
  font-family: 'Mulish', serif !important;
}

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

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

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

The font-family is instead set to the Antd default. If I turn disable this css when inspecting it falls back to the Mulish font.

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

How can the global font be overridden with Antd 4.23.0?

Antd - Override the global font

0 Answers