Answers for "add font to react js"

how to add custom font to react project

@font-face {
  font-family: "AssistantRegular";
  src: local("AssistantRegular"),
    url("./fonts/assistant.regular.ttf") format("truetype");
  font-weight: normal;
}

add font to react js

Create a folder called fonts under src
Download the required fonts into the src\fonts folder

Next, import the fonts into the index.js file.
import './fonts/Goldman/Goldman-Bold.ttf';

In the index.css file add,
@font-face {
font-family: "GoldmanBold";
src: local("GoldmanBold"),
 url("./fonts/Goldman/Goldman-Bold.ttf") format("truetype");
font-weight: bold;
}

Now add a class name in the App.css file that uses this family name.
.font-face-gm {
 font-family: "GoldmanBold";
}

Use this class name in your React component,
   <div className="font-face-gm">
              This is using Font Face. 
    </div>

How to include custom fonts in a react project

/*Create a directory "fonts" in your src folder
Move your font files in the "fonts" directory
Create / In your App.css file, you can use them as followed
*/

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
  /* other formats include: 'woff2', 'truetype, 'opentype',
                            'embedded-opentype', and 'svg' */
}

/*Import the App.css file in your App.js*/