how to include custom fonts in a react project

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

1Create a folder called fonts under src
2Download the required fonts into the src\fonts folder
3
4Next, import the fonts into the index.js file.
5import './fonts/Goldman/Goldman-Bold.ttf';
6
7In the index.css file add,
8@font-face {
9font-family: "GoldmanBold";
10src: local("GoldmanBold"),
11 url("./fonts/Goldman/Goldman-Bold.ttf") format("truetype");
12font-weight: bold;
13}
14
15Now add a class name in the App.css file that uses this family name.
16.font-face-gm {
17 font-family: "GoldmanBold";
18}
19
20Use this class name in your React component,
21   <div className="font-face-gm">
22              This is using Font Face. 
23    </div>
24
25

1/*Create a directory "fonts" in your src folder
2Move your font files in the "fonts" directory
3Create / In your App.css file, you can use them as followed
4*/
5
6@font-face {
7  font-family: 'MyFont';
8  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
9  /* other formats include: 'woff2', 'truetype, 'opentype',
10                            'embedded-opentype', and 'svg' */
11}
12
13/*Import the App.css file in your App.js*/
14