Search code examples
reactjsimportfonts

Import css from public/assets folder in react js gives "Relative imports outside of src/ are not supported"

I generated a font kit and trying to import it in my project. I am getting this error

enter image description here

I know if I put the font folder inside src then it will work but I want to keep fonts inside the assets folder which is inside the public folder.

To import the font I am using below code in the src/index.css

 @import url("/public/assets/fonts/calibri/styleCalibri.css");

Can anyone suggest me how I can import this font?

Many Thanks.

Solution

  • To access /public/assets/font folder, you have to make a little change for your import. Just put .. before /public.

    @import url("../public/assets/fonts/calibri/styleCalibri.css");

    or try to import it from public/index.html file like this:

    <link rel="stylesheet" href="/assets/fonts/calibri/styleCalibri.css">