16

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

enter image description here

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'),
  }
`
Phillip YS
  • 784
  • 3
  • 10
  • 33

2 Answers2

29

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.

Victor Feitosa
  • 487
  • 4
  • 12
  • This throws `Invalid module name in augmentation, module '*.ttf' cannot be found.` for me. – Sir hennihau Apr 20 '23 at 14:19
  • Just to clarify, cause it took me a while to figure our where to put the file, it should go in the very same `fonts` folder that you create to store the `.ttf` files. In my case at least, this solved the whole issue, thank you! – Manuel Mariano Silva Jun 29 '23 at 15:17
-1

According to your folder structure LandingPages.tsx is inside pages folder. The pages folder is a sibling of the fonts folder. You need to traverse to fonts folder from inside of pages folder.

The correct path will be '.././fonts/Gotham-Bold.ttf'

You need to move one level up (..) and then go to the fonts folder.

Let me know if this fixes your issue.

Srijan
  • 257
  • 1
  • 8