Chakra UI Typography

//App.js

// Filename - App.js
 
import { ChakraProvider, Text} 
    from "@chakra-ui/react";
import Article from "./Article";

import "./App.css";
 
function App() {
    return (
        <ChakraProvider>
            <Text
                color="#2F8D46"
                fontSize="2rem"
                textAlign="center"
                fontWeight="600"                
                my="1rem">
                GeeksforGeeks - ReactJS Chakra UI concepts
            </Text>            
            <Article />
        </ChakraProvider>
    );
}
 
export default App;

// Article.js

import {
  Flex,
  Box,
  Text,
  Stack,
} from "@chakra-ui/react";
import './fonts/font.css';

const Article = () => {

  return (
    <Box bg='lightgrey' w='100%' p={4} >
      <Flex justifyContent="center">
        <Flex w="full" direction="column"
          w="60%" alignItems="center">
          <Text as="h1" style=
            {
              {
                fontFamily: 'BlueParty',
              }
            } fontWeight="bold">
            Typography by Chakra UI
          </Text>
          <Text noOfLines={[1, 2, 3]}>
            "Typography is a feature for styling
            and formatting the text content.
            It is used to create customized headings,
            inline subheadings, lists, paragraphs, aligning,
            adding more design-oriented font styles, and much more."
          </Text>
          <Text style=
            {
              {
                fontFamily: 'GreatVibes',
              }
            }>
            This is my text using "Greatvibes.otf" font file
          </Text>
          <Stack spacing={2}>
            <Text fontSize='xl'>
              This is text in xl size
            </Text>
            <Text fontSize='lg' color='tomato'>
              This is text in lg size
            </Text>
            <Text fontSize='md' color='aquamarine'>
              This is text in md size</Text>
            <Text fontSize='sm' color='aliceblue'>
              This is text in sm size</Text>
            <Text fontSize='xs'>
              This is text in xs size</Text>
          </Stack>
        </Flex>
      </Flex>
    </Box>
  );
};
export default Article;