es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Las fuentes personalizadas no funcionan en la aplicación de ReactJS.

17 Jul, 2023 Programación

Agregué los archivos .otf al proyecto y luego los importé en 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”;

Luego, en 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”);
}

Luego se utilizó para el elemento de la interfaz de usuario utilizando css en línea.

Pero no hay cambios en el texto de Textfield, sigue siendo el mismo que antes.

Imagen

Pero no hay cambios en el texto de Textfield, sigue siendo el mismo que antes.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Según la información proporcionada, parece que los archivos de fuente se han importado correctamente y se han añadido las reglas @font-face al archivo index.css. Sin embargo, la fuente no se está aplicando al componente TextField como se esperaba.

    Un posible problema podría ser que la propiedad fontFamily no se haya establecido correctamente en la prop sx para el TextField. Asegúrese de que el nombre de la familia de fuentes coincida con el utilizado en la regla @font-face.

    Otro problema podría ser que los estilos en línea para TextField estén siendo anulados por estilos globales en otra parte del código. Intente añadir !important a la propiedad fontFamily para asegurarse de que tenga prioridad sobre otros estilos.

    Si el problema persiste, intente inspeccionar el elemento renderizado en las herramientas de desarrollo del navegador para ver si la propiedad font-family se establece correctamente y si el archivo de fuente se está descargando correctamente por el navegador.

Comments are closed.