title: React JS add local font
body: <p>I want to add a custom font which is in my local machine, I added the font in the <code>src/fonts/</code> the font file itself is named <code>DIN Next LT Arabic Regular.ttf</code>.</p>
  
  <p>I found one of the answers suggested that I should put it that way and add this line to my <code>index.css</code> file</p>
  
  <pre><code>@font-face {
    font-family: 'DIN Next LT Arabic Regular' !important;
    src: local('DIN Next LT Arabic Regular'), url('./fonts/DIN Next LT Arabic Regular.ttf') format('truetype');
  }
  </code></pre>
  
  <p>and then import the <code>index.css</code> to my <code>index.js</code> which was already done by the <code>create-react-app</code> command.</p>
  
  <p>But it's not working, and I have no clue why.</p>
  
  <p>PS: I have a <code>.env</code> file which contains this line <code>NODE_PATH=src/</code> to not use relative path.</p>