title: Not able to load .ttf in React
body: <p>It throws DOM EXCEPTION</p>
  
  <p>styles file </p>
  
  <pre><code>  import { fontUrls1 } from './Fonts/Amaranth-Bold.ttf';
  
    const GlobalStyle = createGlobalStyle`
         @font-face {
         font-family: 'Amaranth-Bold';
         src: url('${fontUrls1}') format('truetype'); 
         }
  
         body {
            font-family: 'Amaranth-Bold';
         }
  
         body.fontLoaded {
            font-family: 'Amaranth-Bold' ;
         }'
  </code></pre>
  
  <p>My app.js file <br></p>
  
  <pre><code>     const openUberMoveLightObserver = new FontFaceObserver('Amaranth- 
        Bold',{});
  </code></pre>
  
  <p>Executing this line throws an error.</p>
  
  <pre><code> openUberMoveLightObserver.load().then(() =&gt; {
      document.body.classList.add('fontLoaded');
    });   
  </code></pre>
  
  <p>Uncaught (in promise) DOMException       </p>