title: Import Arabic font to React Material Theme
body: <p>I need to use Noto Sans Arabic font in my React material UI theme. 
  The theme is working well, overrides are working too.</p>
  
  <p>I have tried  <a href="https://material-ui.com/customization/typography/" rel="nofollow noreferrer">React Material UI docs</a> to import my fonts like in react-material documentation, but it doesn't work: </p>
  
  <pre><code>import notoArabic from '../static/fonts/NotoSansArabic-Regular.ttf'
  
  ....
  
  
  const arabic = {
    fontFamily: 'Noto Sans Arabic',
    fontStyle: 'regular',
    fontDisplay: 'swap',
    fontWeight: 400,
    src: `
      local('Noto Sans Arabic'),
      local('Noto Sans Arabic-Regular'),
      url(${notoArabic}) format('ttf')
    `,
    unicodeRange:
      'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
  };
  
  ...
  
  overrides: {
      MuiCssBaseline: {
        '@global': {
          '@font-face': [arabic],
        },
      },
  
  ...
  </code></pre>
  
  <p>I expect that the font will be imported and work.</p>
  
  <p>I have any errors, and can see font-family: Noto Sans Arabic; in my browser. But it doesn't work</p>