Webpack can't load fonts (ttf)

Question

Currently I have 3 fonts that I want to add to my React project:a, a light, a bold.
My file structure:

/src
├── /fonts/
│   ├── /A.ttf
│   ├── /A-         


        

Answer 1

As of webpack 5 you can use built-in asset modules instead. From the guide here, add this to module.rules to load .ttf files:

{
  test: /\.(woff|woff2|eot|ttf|otf)$/i,
  type: 'asset/resource',
},