Issue
Hello I have question can I have 2 different fonts for Heading like you know you define
<Heading fontFamily={???}></Heading>
and set font family inside it. I do not want to have one font family for heading.
import { extendTheme } from "@chakra-ui/react";
const theme = extendTheme({
fonts: {
heading: "Dancing Script",
},
});
export default theme;
Solution
Yes, you can write <Heading fontFamily="myFont1"></Heading>
and <Heading fontFamily="myFont2">Some Text</Heading>
if you declare these two fonts in your extended theme:
import { extendTheme } from "@chakra-ui/react";
import "@fontsource/dancing-script";
const theme = extendTheme({
fonts: {
myFont1: "Dancing Script",
myFont2: "Times New Roman",
},
});
export default theme;
Also, notice that I didn't have to import any external library for Times New Roman (because it's likely to already be installed on you users' computer) but I had to import @fontsource/dancing-script
because it's not a standard font. (Remember to install it with npm install --save @fontsource/dancing-script
before you use it).
You can probably find any fonts you need on FontSource, and for more information (and alternative solutions) there is the Chakra UI documentation on fonts.
Answered By - Giorgio
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.