feat: add custom fonts

src/components/shared/typography/Paragraph.jsx

@@ -1,4 +1,5 @@
 import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils';
 
 const paragraphVariants = cva(['font-syne', 'text-left', 'leading-7.5', 'font-medium'], {
 	variants: {
@@ -13,7 +14,7 @@ const paragraphVariants = cva(['font-syne', 'text-left', 'leading-7.5', 'font-me
 
 export default function Paragraph({ variant = 'body2', className, children, ...props }) {
 	return (
-		<p className={paragraphVariants({ variant, className })} {...props}>
+		<p className={cn(paragraphVariants({ variant, className }))} {...props}>
 			{children}
 		</p>
 	);

src/components/shared/typography/Text.jsx

@@ -1,4 +1,5 @@
 import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils';
 
 const textVariants = cva(['font-syne', 'text-left', 'font-medium'], {
 	variants: {
@@ -13,7 +14,7 @@ const textVariants = cva(['font-syne', 'text-left', 'font-medium'], {
 
 export default function Text({ variant, className, children, ...props }) {
 	return (
-		<p className={textVariants({ variant, className })} {...props}>
+		<p className={cn(textVariants({ variant, className }))} {...props}>
 			{children}
 		</p>
 	);

src/components/shared/typography/index.jsx

@@ -0,0 +1,21 @@
+import { cn } from '../../../lib/utils';
+
+export { default as Heading } from './Heading';
+export { default as Paragraph } from './Paragraph';
+export { default as Text } from './Text';
+
+export const HeroText = ({ children, className, ...props }) => {
+	return (
+		<h1 className={cn('text-12.5xl leading-16 font-semibold font-agoka text-left', className)} {...props}>
+			{children}
+		</h1>
+	);
+};
+
+export const PersonalizedText = ({ children, className, ...props }) => {
+	return (
+		<p className={cn('text-base leading-4 font-semibol font-cassandra text-left', className)} {...props}>
+			{children}
+		</p>
+	);
+};

src/pages/playground.jsx

@@ -1,8 +1,10 @@
-import { Heading, Paragraph, Text } from '../components/shared';
+import { Heading, HeroText, Paragraph, PersonalizedText, Text } from '../components/shared';
 
 export default function Playground() {
 	return (
 		<div className='container py-6'>
+			<HeroText>Hero Text</HeroText>
+			<PersonalizedText>Personalized Text</PersonalizedText>
 			<Heading variant='h1'>Heading 1</Heading>
 			<Heading variant='h2'>Heading 2</Heading>
 			<Heading variant='h3'>Heading 3</Heading>

src/styles/index.css

@@ -4,6 +4,16 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+	font-family: 'Agoka';
+	src: url('/fonts/agoka.otf') format('opentype');
+}
+
+@font-face {
+	font-family: 'Cassandra';
+	src: url('/fonts/cassandra.ttf') format('truetype');
+}
+
 @layer base {
 	:root {
 		/* Design system */

tailwind.config.js

@@ -30,6 +30,7 @@ export default {
 			'10xl': '48px',
 			'11xl': '64px',
 			'12xl': '72px',
+			'12.5xl': '75px',
 			'13xl': '80px',
 			'14xl': '96px',
 		},
@@ -52,11 +53,14 @@ export default {
 			13: '64px',
 			14: '72px',
 			15: '96px',
+			16: '105px',
 		},
 		fontFamily: {
 			// use in tailwind as font-syne
 			syne: ['Syne', ...defaultTheme.fontFamily.sans],
 			prompt: ['Prompt', ...defaultTheme.fontFamily.sans],
+			agoka: ['Agoka', ...defaultTheme.fontFamily.sans],
+			cassandra: ['Cassandra', ...defaultTheme.fontFamily.sans],
 		},
 		extend: {
 			colors: {