3

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!

Jose Peres
  • 197
  • 1
  • 1
  • 18

1 Answers1

1

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

berkobienb
  • 639
  • 5
  • 12
  • Hey there. The thing is, public folder is not in my current directory. My current directory is src folder, and usually when I try to call public I just go "/ ". But this error never ocurred to me before. – Jose Peres Oct 28 '20 at 13:47
  • Right, but "index.css" is not in the public folder, the fonts are, inside an assets folder. – Jose Peres Oct 28 '20 at 14:00
  • Just include the fonts in your project and import them. That's the best solution – berkobienb Oct 28 '20 at 14:02
  • Thanks, but not what I'm looking for. Need to keep fonts and images out of the final build. But thank you! – Jose Peres Oct 28 '20 at 14:14
  • Can you just try and change the format('truetype') to format('woff') – berkobienb Oct 28 '20 at 14:22
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/223761/discussion-between-berkobienb-and-jose-peres). – berkobienb Oct 28 '20 at 14:26