Блог

Я добавил файлы .otf в проект, а затем импортировал их в index.js

 import "./assets/fonts/Averta-Bold.otf"; import "./assets/fonts/Averta-Light.otf"; import "./assets/fonts/Averta-Regular.otf"; import "./assets/fonts/Averta-Semibold.otf";  

Затем в index.css

 @font-face {  font-family: "AvertaBold";  src: local("AvertaBold"),  url("./assets/fonts/Averta-Bold.otf") format("truetype"); } @font-face {  font-family: "AvertaLight";  src: local("AvertaLight"),  url("./assets/fonts/Averta-Light.otf") format("truetype"); } @font-face {  font-family: "AvertaRegular";  src: local("AvertaRegular"),  url("./assets/fonts/Averta-Regular.otf") format("truetype"); } @font-face {  font-family: "AvertaSemiBold";  src: local("AvertaSemiBold"),  url("./assets/fonts/Averta-Semibold.otf") format("truetype"); }  

далее используется для элемента пользовательского интерфейса с использованием встроенного css.

 lt;TextField  sx={{  marginTop: 4,  fontFamily: "AvertaRegular",  }}  margin="normal"  required  fullWidth  id="username"  label="WITSML username"  name="username"  autoComplete="username"  autoFocus  /gt;  

Но текст текстового поля не изменился, он все тот же, что и раньше.