title: React Cannot find module - ttf, otf fonts
body: <p>I'm trying to load local font like the code below but I keep getting <code>Cannot find module '@/landing/fonts/Gotham-Bold.ttf'</code> error and have no idea what is really wrong this path.</p>
  
  <p>my folder structure looks like this, and the code I'm working on is <code>LandingPage.tsx</code></p>
  
  <p><a href="https://i.stack.imgur.com/rsKFZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rsKFZ.png" alt="enter image description here"></a></p>
  
  <pre><code>import { createGlobalStyle } from 'styled-components';
  import font from './fonts/Gotham-Bold.ttf'
  
  const Gotham = createGlobalStyle`
    @font-face {
      font-family: 'Gotham';
      font-style: normal;
      font-weight: bold;
      src:
        url(${font}) format('truetype'),
    }
  `
  </code></pre>