add font in react
xxxxxxxxxx
/*
Create src/fonts
Add fonts.css in it.
Import your fonts from url or define them from files directly...
... in this fonts.css.
Import this file in src/index.js.
See below for example contents of fonts.css;
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
/* ------ or ------ */
@font-face {
font-family: "GoldmanBold";
src: local("GoldmanBold"),
url("./fonts/Goldman/Goldman-Bold.ttf") format("truetype");
font-weight: bold;
}
// Now you are free to use them in any element;
font-family: "Poppins", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
/* ------ or ------ */
font-family: "GoldmanBold"
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
xxxxxxxxxx
@font-face {
font-family: "AssistantRegular";
src: local("AssistantRegular"),
url("./fonts/assistant.regular.ttf") format("truetype");
font-weight: normal;
}
xxxxxxxxxx
/*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*/