diff --git a/app/fonts.ts b/app/fonts.ts
index 5ccafd0..f3cd268 100644
--- a/app/fonts.ts
+++ b/app/fonts.ts
@@ -8,24 +8,44 @@ import {
export const aleo = Aleo({
weight: ['300', '400', '700'],
+ variable: '--font-aleo',
display: 'swap',
+ subsets: ['latin'],
});
export const aref_ruqaa = Aref_Ruqaa({
weight: ['400', '700'],
+ variable: '--font-aref-ruqaa',
display: 'swap',
+ subsets: ['latin'],
});
export const barlow = Barlow({
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
style: 'italic',
+ variable: '--font-barlow',
display: 'swap',
+ subsets: ['latin'],
});
export const jetbrains_mono = JetBrains_Mono({
display: 'swap',
+ variable: '--font-jetbrains-mono',
+ subsets: ['latin'],
});
export const poppins = Poppins({
weight: ['300', '400', '700', '100', '200', '500', '600', '800', '900'],
+ variable: '--font-poppins',
+ subsets: ['latin'],
});
+
+const fonts = {
+ aleo,
+ aref_ruqaa,
+ barlow,
+ jetbrains_mono,
+ poppins,
+};
+
+export default fonts;
diff --git a/app/layout.tsx b/app/layout.tsx
index 1f8a602..c0972a6 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,6 +4,8 @@ import RUAThemeProvider from './theme-provider';
import HeadBar from 'components/nav-bar';
import Footer from 'components/footer';
import BackToTop from 'components/common/back-to-top';
+import clsx from 'clsx';
+import fonts from './fonts';
export default function RootLayout({
children,
@@ -11,7 +13,10 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
-
+ font.variable))}
+ >
diff --git a/tailwind.config.js b/tailwind.config.js
index d74181e..032cc12 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,11 +9,11 @@ module.exports = {
theme: {
extend: {
fontFamily: {
- Aleo: ['Aleo', 'serif'],
- 'Aref-Ruqaa': ['Aref Ruqaa', 'serif'],
- Barlow: ['Barlow', 'sans-serif'],
- Poppins: ['Poppins', 'sans-serif'],
- Mono: ['JetBrains Mono', '-apple-system', 'monospace'],
+ Aleo: ['--font-aleo'],
+ 'Aref-Ruqaa': ['var(--font-aref-ruqaa)'],
+ Barlow: ['var(--font-barlow)'],
+ Poppins: ['var(--font-poppins)'],
+ Mono: ['var(--fonts-jetbrains-mono)', '-apple-system', 'monospace'],
},
colors: {
bluish: {