Can´t access my public folder from css file in React App

user_9699805 0
Viewed 1472

I'm receiving the following error everytime I try to access a file in my public folders.

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Can't resolve '/assets/fonts/PlantinMTProRg.woff' in 'C:\Users\User\Desktop\NewPage\webpage\src'

As you can see, I'm trying to call a font from my index.css, which is inside my src folder.

I call it as it follows:

@font-face {
  font-family: 'PlantinMTPro';
  src: local('plantin_mt_pro'), url(/assets/fonts/PlantinMTProRg.woff) format('truetype');
}

But no luck so far. Having the same issue for images.

Any ideas?

Thanks in advance!

public-folders postcss node-modules reactjs css
1 Answers

In your index.html you must link your index.css from the public directory

<link rel="stylesheet" href="%DIR%/NewPage/webpage/src/index.css">

From there, you need to figure out the right url to reach your font family, which you said was in your src file.

@font-face {
  font-family: 'PlantinMTPro';
  src: local('plantin_mt_pro'), url(/assets/fonts/PlantinMTProRg.woff) format('woff');
}

Also, I notice you used format of truetype. Only use that if you're importing a .ttf file. Use format('woff') in this scenario.

You may need to add some changes here if you're trying to support multiple browsers

user_70326000
Related