Merge pull request #22 from BirthdayyBot/feat/use-nextjs-font

feat: ✨ Implement `next/font` for using fonts
BirthdayyBot · Sep 25, 2023 · 3de13f5 · 3de13f5
2 parents e607dbf + 10d08c9
commit 3de13f5
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import Navbar from '@components/navbar';
 import AuthProvider from '@lib/provider/auth';
 import JotaiProvider from '@lib/provider/jotai';
 import '@styles/globals.css';
+import { hindVadodaraFont, ralewayFont, rubikFont } from '@styles/theme/fonts';
 import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -13,7 +14,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 	return (
 		<JotaiProvider>
 			<AuthProvider>
-				<html lang="en" data-theme="birthdayy">
+				<html lang="en" data-theme="birthdayy" className={`${hindVadodaraFont.variable} ${rubikFont.variable} ${ralewayFont.variable}`}>
 					<body>
 						<Navbar />
 						<div className="main container mx-auto">{children}</div>

diff --git a/src/styles/theme/_fonts.scss b/src/styles/theme/_fonts.scss
@@ -1,8 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Hind+Vadodara&family=Raleway:wght@400;800&family=Rubik:wght@500;800&display=swap');
-
-$header-font: 'Rubik', sans-serif;
-$sub-header-font: 'Raleway', sans-serif;
-$body-font: 'Hind Vadodara', sans-serif;
+$header-font: 'var(--font-rubik)', sans-serif;
+$sub-header-font: 'var(--font-raleway)', sans-serif;
+$body-font: 'var(--font-hind-vadodara)', sans-serif;
 
 $family-primary: $body-font;
 $family-secondary: $header-font;

diff --git a/src/styles/theme/fonts.ts b/src/styles/theme/fonts.ts
@@ -0,0 +1,22 @@
+// Define your fonts
+import { Hind_Vadodara, Raleway, Rubik } from 'next/font/google';
+
+export const rubikFont = Rubik({
+	subsets: ['latin'],
+	variable: '--font-rubik',
+	weight: ['500', '800'],
+	display: 'swap'
+});
+export const ralewayFont = Raleway({
+	subsets: ['latin'],
+	variable: '--font-raleway',
+	weight: ['400', '800'],
+	display: 'swap'
+});
+export const hindVadodaraFont = Hind_Vadodara({
+	subsets: ['latin'],
+	variable: '--font-hind-vadodara',
+	weight: ['400'],
+	display: 'swap',
+	preload: true
+});
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -13,10 +13,10 @@ const TailwindConfig = {
 			}
 		},
 		fontFamily: {
-			heading: ['Rubik'],
-			'sub-heading': ['Raleway', 'sans-serif'],
-			body: ['"Hind Vadodara"', 'sans-serif'],
-			sans: ['"Hind Vadodara"', 'sans-serif']
+			heading: ['var(--font-rubik)', 'sans-serif'],
+			'sub-heading': ['var(--font-raleway)', 'sans-serif'],
+			body: ['var(--font-hind-vadodara)', 'sans-serif'],
+			sans: ['var(--font-hind-vadodara)', 'sans-serif']
 		}
 	},
 	plugins: [require('@tailwindcss/typography'), require('daisyui')],