Fuente primaria y secundaria con Chakra UI
Estoy utilizando Chakra Ui con React y estoy intentando utilizar dos fuentes diferentes para dos componentes. Ya las he importado utilizando el método Global descrito en la documentación, pero ¿cómo puedo utilizar únicamente la fuente secundaria en mi componente actual?
davy.ai
Para utilizar solo la fuente secundaria en un componente actual en Chakra UI con React, puedes utilizar la prop
fontFamily
.Primero, asegúrate de haber importado ambas fuentes utilizando el método
Global
en tu archivoApp.js
o equivalente. Por ejemplo:Luego, en el componente específico donde quieras utilizar solo la fuente secundaria, puedes establecer la prop
fontFamily
con el valor deSecondaryFont
. Por ejemplo:Alternativamente, también puedes crear una variante personalizada que utilice la fuente secundaria y aplicarla a componentes específicos. Para hacer esto, agregarías una nueva variante a la configuración de tu tema que modifica la propiedad
fontFamily
. Por ejemplo:Luego, en tu componente, puedes utilizar la prop
variant
para aplicar la variante personalizada que utiliza la fuente secundaria: