title: Antd - Override the global font
body: <p>I would like to override the global <code>Antd</code> font. I've found a few examples but the <code>Antd</code> styling is always taking precedence.</p>
  <p>In the top level component (<code>App.tsx</code>) I'm importing an <code>scss</code> file. This file is being loaded correctly as I can see the style being overridden when inspecting the page.</p>
  <p><strong>app.scss</strong></p>
  <pre><code>@font-face {
    font-family: 'Mulish', serif !important;
  }
  
  &amp;:root{
    font-family: &quot;Mulish&quot;, serif !important;
  }
  
  html body{
    font-family: &quot;Mulish&quot;, serif !important;
  }
  
  body{
    font-family: &quot;Mulish&quot;, serif !important;
  }
  </code></pre>
  <p>The <code>font-family</code> is instead set to the <code>Antd</code> default. If I turn disable this <code>css</code> when inspecting it falls back to the <code>Mulish</code> font.</p>
  <pre><code>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';
  </code></pre>
  <p>How can the global font be overridden with <code>Antd 4.23.0</code>?</p>