I am using Chakra Ui with React and I am trying to use two different fonts for two components, I already imported them using the Global method described in the docs but how can I use only the secondary one in my current component?
When you mean secondary one, I am assuming that this is your secondary font? If so, there are two things you should be aware of. It is the textStyles key and extendTheme function from Chakra UI:
Import the extendTheme function imported from Chakra UI.
import { extendTheme } from "@chakra-ui/react"
Using the extendTheme function will allow you to add new styles. This is where you will place the textStyles key:
const themeExample = extendTheme({
// Whatever you pass here will be ADDED to the theme.
textStyles: {
primary: {
fontFamily: "Font Primary"
},
secondary: {
fontFamily: "Font Secondary"
},
},
});
Now the desired fonts are set up, they are easily accessible:
<Box textStyle='primary'>Component One</Box>
<Box textStyle='secondary'>Component Two</Box>
More information can be found here: https://chakra-ui.com/docs/features/text-and-layer-styles