ReactError: You may need an appropriate loader to handle this file type

Question

I have a local RobotoFont.tff which I am referencing in my index.scss file like this:

@font-face {
  font-family: 'Roboto';
  src: url('src/assets/Roboto/Roboto-Regular.ttf') format('truetype');
}
.rb {font-family: 'Roboto';}

But I am getting the following error at compile time:

Failed to compile.

./src/assets/Roboto/Roboto-Regular.ttf 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

The project is in React-Typescript and do I need to install any specific loaders as specified in the link? If yes does it work for .ttf files?

Did you try with this loader: https://www.npmjs.com/package/ttf-loader ? — vighnesh153, Aug 25 '21 at 12:27
Tried, added the package and added it in webpack too, but still getting the same error. — , Aug 25 '21 at 12:31
Take a look at this too: https://stackoverflow.com/questions/45489897/load-fonts-with-webpack-and-font-face — vighnesh153, Aug 25 '21 at 12:35

score 3 · Answer 1 · answered Aug 25 '21 at 12:43

3

Just try file-loader or url-loader

For example webpack.config.js

     {
        test: /\.(png|gif|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader',
      },

answered Aug 25 '21 at 12:43

Joowon

31
1

ReactError: You may need an appropriate loader to handle this file type

1 Answers1