Added fonts to the app.

package.json

@@ -19,6 +19,11 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@fontsource/anonymous-pro": "^5.0.12",
+    "@fontsource/anybody": "^5.0.19",
+    "@fontsource/kalam": "^5.0.12",
+    "@fontsource/montserrat": "^5.0.17",
+    "@fontsource/tilt-neon": "^5.0.4",
     "@iconify/react": "^4.1.1",
     "@reduxjs/toolkit": "^2.2.1",
     "date-fns": "^3.3.1",

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>

yarn.lock

@@ -1494,6 +1494,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource/anonymous-pro@npm:^5.0.12":
+  version: 5.0.12
+  resolution: "@fontsource/anonymous-pro@npm:5.0.12"
+  checksum: 10/3604c041821d7b26664323a5d5a269ee096486e5f66168d37188093eadf57b95064cc2dde1c381134d9661125e911c00d4dee4a61c5441006aead8e0f80c81c2
+  languageName: node
+  linkType: hard
+
+"@fontsource/anybody@npm:^5.0.19":
+  version: 5.0.19
+  resolution: "@fontsource/anybody@npm:5.0.19"
+  checksum: 10/e39d4311232eb92e4189eb8e1e345b19414e6c0706d8d000ba0e3a4411feeb50c17897c57d22405e895a7f40fb04f22faf2ebc1716b96b305ed7803b56c6003d
+  languageName: node
+  linkType: hard
+
+"@fontsource/kalam@npm:^5.0.12":
+  version: 5.0.12
+  resolution: "@fontsource/kalam@npm:5.0.12"
+  checksum: 10/dc4fbd2ff38593c233330dea4d82ec62fd585c05883155a3615c3bb7b78ba62c6ecc3fa4336ee57bd995c475e1921efb01c306a54afdf1d14cbcdb46df52de76
+  languageName: node
+  linkType: hard
+
+"@fontsource/montserrat@npm:^5.0.17":
+  version: 5.0.17
+  resolution: "@fontsource/montserrat@npm:5.0.17"
+  checksum: 10/8d91c3b94eaff379396403b3859f0e8a3b4ab2e44808f6a036c410c8d19d031b7442ee587d1cca38e7389b4f3587af358bf41bf70ec8c62dc4dcb2cb27637a43
+  languageName: node
+  linkType: hard
+
+"@fontsource/tilt-neon@npm:^5.0.4":
+  version: 5.0.4
+  resolution: "@fontsource/tilt-neon@npm:5.0.4"
+  checksum: 10/07b5fac6457b2b14792ba84403f9943b995608d7e3113f9647ffc1635422a2dcd9745585404251cf2cbd9017c35fbeeaa32e38c43551cb1e2a3af159c6564292
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/config-array@npm:^0.11.14":
   version: 0.11.14
   resolution: "@humanwhocodes/config-array@npm:0.11.14"
@@ -4078,6 +4113,11 @@ __metadata:
     "@chakra-ui/react": "npm:^2.8.2"
     "@emotion/react": "npm:^11.11.3"
     "@emotion/styled": "npm:^11.11.0"
+    "@fontsource/anonymous-pro": "npm:^5.0.12"
+    "@fontsource/anybody": "npm:^5.0.19"
+    "@fontsource/kalam": "npm:^5.0.12"
+    "@fontsource/montserrat": "npm:^5.0.17"
+    "@fontsource/tilt-neon": "npm:^5.0.4"
     "@iconify/react": "npm:^4.1.1"
     "@reduxjs/toolkit": "npm:^2.2.1"
     "@types/node": "npm:^20.11.20"