title: What is the reason of ERR_ABORTED 500 (Internal Server Error) when I use font-face?
body: <p>I am developing a full-stack project using <strong>React, Node, and Express</strong>. I am not sure if the stack is related to the problem, though you may find it relevant to the question. </p>
  
  <p><strong>Fact #1</strong>: </p>
  
  <p>Using fon-face, I've tried to host some desired fonts and used them in the project. For instance,</p>
  
  <pre><code>@font-face {
    font-family: Montserrat-Black;
    src: url(/src/resource/font/montserrat-black.ttf);
  }
  </code></pre>
  
  <p><strong>Fact #2</strong>:</p>
  
  <p>I put font-face in the index.css, and the mentioned css file is imported into the index.js. You should know that using React, eventually, all components are loaded inside the index.js. Therefore, all components and the ultimate generated Dom-tree should've found the styles. </p>
  
  <p><strong>Fact #3</strong>:</p>
  
  <p>Besides, for every component, I've created a seperated css file. So, my menu-bar-title component has its own css file in which related styles are incorprated. For example, menu-bar-title.css contains the follwoing lines. </p>
  
  <pre><code>#menuBarTitle{
      font-family:Montserrat-Black;
  }
  </code></pre>
  
  <p><strong>Fact #4</strong> :</p>
  
  <p>This is how the mentioned component has been developed. </p>
  
  <pre><code>import React from 'react';
  import './css/menu-bar-title.css'
  
  export default class MenuBarTitle extends React.Component {
      render() {
          return (
              &lt;div id="menuBarTitle" className="absolute"&gt;
                  HELLO WORLD!
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>Problem</strong> :</p>
  
  <p>It seems everything goes well with my react structure. The component is created as expected. 
  However, the font face does not work! When I check, the console says: </p>
  
  <blockquote>
    <p>GET <a href="http://localhost:3000/src/resource/font/montserrat-black.ttf" rel="nofollow noreferrer">http://localhost:3000/src/resource/font/montserrat-black.ttf</a> <strong>net::ERR_ABORTED 500 (Internal Server Error)</strong>
    index.js:1</p>
  </blockquote>
  
  <p>This error tells me that the flow of css files are ok, because it has found the related font face and tried to load it from the right directroy! Nevertheless, it doesn't work! </p>
  
  <p>Do you have any idea what might have caused the problem?</p>
  
  <p>Thank you. </p>