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;
}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*/Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
