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

This is what worked for me. Import like this... src: url('../assets/fonts/gilroy/gilroy.woff2') format('woff2'); — Shawn Sheehan, Jul 18 '19 at 03:41

score 12 · Answer 1 · answered Sep 03 '20 at 15:31

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.

score 0 · Answer 2 · answered Feb 28 '19 at 11:08

0

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.

answered Feb 28 '19 at 11:08

Srijan

261
1
8

this doesn't work. and react will display an error 'Cannot find module' – Antenaina Jul 28 '20 at 18:15

React Cannot find module - ttf, otf fonts

2 Answers2