Added fonts to the app.

src/components/buttons/Custom.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
+import { Box, Link, Button, BoxProps, Text } from "@chakra-ui/react";
 import { motion } from "framer-motion";
 
 interface CustomButtonProps {
@@ -14,7 +14,9 @@ const CustomButton = ({ text, link, type }: CustomButtonProps): JSX.Element => {
   return (
     <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
       <Link href={link} target="_blank" rel="noopener">
-        <Button variant={type}>{text}</Button>
+        <Button variant={type}>
+          <Text>{text}</Text>
+        </Button>
       </Link>
     </MotionBox>
   );

src/components/buttons/KoFi.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
+import { Box, Link, Button, BoxProps, Text } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
 import { motion } from "framer-motion";
 
@@ -14,7 +14,7 @@ const KoFi = (): JSX.Element => {
         rel="noopener"
       >
         <Button variant="kofi" leftIcon={<Icon icon="cib:ko-fi" />}>
-          {"Fund The App"}
+          <Text>{"Fund The App"}</Text>
         </Button>
       </Link>
     </MotionBox>

src/pages/_app.tsx

@@ -1,3 +1,9 @@
+import "@fontsource/montserrat/500.css";
+import "@fontsource/tilt-neon/400.css";
+import "@fontsource/anonymous-pro/400.css";
+import "@fontsource/kalam/400.css";
+import "@fontsource/anybody/400.css";
+
 import type { AppProps } from "next/app";
 import React from "react";
 import { ChakraProvider } from "@chakra-ui/react";

src/theme/AppTheme.ts

@@ -1,5 +1,10 @@
 import { extendTheme, ThemeConfig } from "@chakra-ui/react";
 // import { createBreakpoints } from "@chakra-ui/theme-tools";
+import "@fontsource/montserrat";
+import "@fontsource/tilt-neon";
+import "@fontsource/anonymous-pro";
+import "@fontsource/kalam";
+import "@fontsource/anybody";
 import buttons from "./components/buttonStyles";
 
 const config: ThemeConfig = {
@@ -15,6 +20,14 @@ const config: ThemeConfig = {
 //   "2xl": "100em",
 // });
 
+const fonts = {
+  heading: `'Tilt Neon', system-ui`,
+  body: `'Montserrat', sans-serif`,
+  mono: `'Anonymous Pro', monospace`,
+  brand: `'Kalam', cursive`,
+  LCM: `'Anybody', system-ui`
+};
+
 const AppTheme = extendTheme({
   config,
   colors: {
@@ -22,6 +35,7 @@ const AppTheme = extendTheme({
       main: "#3138dc",
       primary: "#0068ff",
       secondary: "#0086ff",
+      cosmic: "#314a9e",
       hover: "#00aec1",
       warning: "#ffbd48",
       danger: "#FC8181",
@@ -46,8 +60,10 @@ const AppTheme = extendTheme({
   },
   components: {
     Button: buttons
-  }
+  },
+  fonts
   // breakpoints,
 });
 
 export default AppTheme;
+export { fonts };

src/theme/layout/DesktopNav.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, HStack, Link } from "@chakra-ui/react";
+import { Button, HStack, Link, Text } from "@chakra-ui/react";
 import navItems, { NavItem } from "./navItems";
 
 const DesktopNav = (): JSX.Element => {
@@ -18,7 +18,9 @@ const DesktopNav = (): JSX.Element => {
       {navItems.map((navItem: NavItem) => {
         return (
           <Link id={"dekstop-" + navItem[0]} key={navItem[0]} href={navItem[1]}>
-            <Button variant="nav">{navItem[0]}</Button>
+            <Button variant="nav">
+              <Text>{navItem[0]}</Text>
+            </Button>
           </Link>
         );
       })}

src/theme/layout/Header.tsx

@@ -12,6 +12,7 @@ import { Icon } from "@iconify/react";
 import DesktopNav from "./DesktopNav";
 import MobileNav from "./MobileNav";
 import appLogo from "../../../public/images/logo.svg";
+import { fonts } from "../AppTheme";
 
 const Header = (): JSX.Element => {
   const appName = "Lucid Creations Media";
@@ -117,7 +118,7 @@ const Header = (): JSX.Element => {
       >
         <Image height="30" width="30" src={appLogo} alt="App Logo" />
 
-        <Heading as="h1" size="md">
+        <Heading as="h1" size="md" fontFamily={fonts.LCM} fontWeight="400">
           {appName}
         </Heading>
         <Heading color="whiteAlpha.500" as="h2" size="sm">
@@ -151,7 +152,12 @@ const Header = (): JSX.Element => {
               }}
             >
               <Image height="30" width="30" src={appLogo} alt="App Logo" />
-              <Heading as="h1" size="md">
+              <Heading
+                as="h1"
+                size="md"
+                fontFamily={fonts.LCM}
+                fontWeight="400"
+              >
                 {appName}
               </Heading>
               <Heading color="whiteAlpha.500" as="h2" size="sm">

src/theme/layout/MobileNav.tsx

@@ -4,7 +4,8 @@ import {
   Link,
   MenuDivider,
   MenuItem,
-  MenuList
+  MenuList,
+  Text
 } from "@chakra-ui/react";
 import navItems, { NavItem } from "./navItems";
 
@@ -42,7 +43,7 @@ const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
             <Link onClick={() => updateOpen(false)} href={navItem[1]}>
               {index === 0 ? <MenuDivider /> : <Fragment></Fragment>}
               <Button w="100vw" variant={"nav"} p={0} m="auto">
-                {navItem[0]}
+                <Text>{navItem[0]}</Text>
               </Button>
               <MenuDivider />
             </Link>