CODEWITHSUNDEEP
cssreactjswebpacksassfont-face
Evren
Evren

Reputation: 4410

Local fonts to scss file in react

I am trying to import local font in scss file but when I run npm start I get the following errors

ERROR in ./src/components/Box/Box.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../fonts/AvenirNext-Bold-01.ttf' in 'C:\Users\evren\rcp\frontend\src\components\Box'

I have tried different solutions but could not fix this problem.

This is how I import local font file in scss

enter image description here

Appreciate if someone can help. Thanks in advance.

Upvotes: 0

Views: 3133

Answers (1)

timber535
timber535

Reputation: 435

I think you need to check the URL in your request. what have you tried so far? try './fonts/AvernirNext-Bold-01.ttf' seems to me you are looking inside the component not the root folder. As you can see in the error log the path is 'C:\Users\evren\rcp\frontend\src\components\Box'

A way I implemented this is by adding:
in scss folder > theme.scss

@font-face {
    font-family: "Proxima Nova Light";
    src: url("fonts/Proxima Nova Light.eot");
    src: local("☺"),
    url("fonts/Proxima Nova Light.woff") format("woff"),
    url("fonts/Proxima Nova Light.ttf") format("truetype"),
    url("fonts/Proxima Nova Light.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

in your app.js:

@import "scss/theme.scss";

body {
  font-family: "Proxima Nova Light", sans-serif;
}

and finally fonts folder > src/fonts

eot / ttf / woff / svg files go here

Upvotes: 1

Related Questions