How to add local / custom fonts to a react js project?

Question

I want to add some custom / local fonts to my react project, can anyone tell me the method to use it inside react project ?

Below I have added some ss of my code which is not working.

index.js

index.css

app.scss

Thanks

Answer 1

You import the bold font in your index.js but you set the book font in your App.scss. Also try to add !important when setting the font-family on the body:

html,
body {
  font-family: "CooperHewitt-Bold" !important;
}

Using @font-face:

/* index.css */ 
@font-face {
  font-family: "CooperHewitt-Bold";
  src: local("CooperHewitt-Bold"),
    url(./fonts/CooperHewitt-Bold.otf) format("opentype");
}

Make sure to import index.css inside index.js:

import './index.css';
// ...