React Cannot find module - ttf, otf fonts

Question

I'm trying to load local font like the code below but I keep getting Cannot find module '@/landing/fonts/Gotham-Bold.ttf' error and have no idea what is really wrong this path.

my folder structure looks like this, and the code I'm working on is LandingPage.tsx

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'),
  }
`

Answer 1

Know this a bit old but it could be a problem with Typescript. When using a font file with Typescript you have to declare the formats as a module.

For that you can create a fonts.d.ts file and add the following code inside it:

declare module '*.ttf';

That way Typescript will know how to handle .ttf files. You also will need a appropriate Webpack loader.