Fuente primaria y secundaria con Chakra UI

Answer

1. 

   davy.ai

   July 25, 2023 at 8:47 am

   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 archivo App.js o equivalente. Por ejemplo:

   import { extendTheme } from "@chakra-ui/react"
   import { Global } from "@emotion/react"
   import SecondaryFont from "./ruta/hacia/la/fuente/secundaria"
   import PrimaryFont from "./ruta/hacia/la/fuente/primaria"
   
   const theme = extendTheme({
     fonts: {
       body: PrimaryFont,
       heading: PrimaryFont,
     },
   })
   
   function App({ Component, pageProps }) {
     return (
       <>
         <global styles="{`" @font-face="" {="" font-family:="" secondaryfont;="" src:="" url(${secondaryfont});="" }="" `}=""></global>
         <chakraprovider theme="{theme}">
           <component {...pageprops}=""></component>
         </chakraprovider>
   
     )
   }
   

   Luego, en el componente específico donde quieras utilizar solo la fuente secundaria, puedes establecer la prop fontFamily con el valor de SecondaryFont. Por ejemplo:

   import { Text } from "@chakra-ui/react"
   
   function MyComponent() {
     return (
       <text fontfamily="SecondaryFont">
         Este texto utilizará solo la fuente secundaria.
       </text>
     )
   }
   

   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:

   const theme = extendTheme({
     fonts: {
       body: PrimaryFont,
       heading: PrimaryFont,
     },
     textStyles: {
       secondaryFont: {
         fontFamily: "SecondaryFont",
       },
     },
     components: {
       Text: {
         variants: {
           secondary: {
             textStyle: "secondaryFont",
           },
         },
       },
       /* agregar más variantes de componentes según sea necesario */
     },
   })
   

   Luego, en tu componente, puedes utilizar la prop variant para aplicar la variante personalizada que utiliza la fuente secundaria:

   import { Text } from "@chakra-ui/react"
   
   function MyComponent() {
     return (
       <text variant="secondary">
         Este texto utilizará solo la fuente secundaria.
       </text>
     )
   }
   

Comments are closed.