refactor: update font configurations in Tailwind and layout

- Replaced existing font imports with new Google Fonts (DM Sans, DM Mono, DM Serif Text) for improved typography.
- Updated Tailwind configuration to reflect the new font variables and added a new heading font style.
- Adjusted layout component to utilize the updated font classes, enhancing overall design consistency.

src/app/[locale]/layout.tsx

@@ -1,8 +1,6 @@
-import { fontBricolageGrotesque, fontSourceSerif4 } from '@/assets/fonts';
+import { fontBricolageGrotesque, fontDMMono, fontDMSans, fontDMSerifDisplay, fontDMSerifText } from '@/assets/fonts';
 import { routing } from '@/i18n/routing';
 import { cn } from '@/lib/utils';
-import { GeistMono } from 'geist/font/mono';
-import { GeistSans } from 'geist/font/sans';
 import { hasLocale, Locale, NextIntlClientProvider } from 'next-intl';
 import { notFound } from 'next/navigation';
 import { ReactNode } from 'react';
@@ -41,9 +39,10 @@ export default async function LocaleLayout({
         className={cn(
           'size-full antialiased',
           fontBricolageGrotesque.className,
-          fontSourceSerif4.variable,
-          GeistSans.variable,
-          GeistMono.variable
+          fontDMSans.variable,
+          fontDMMono.variable,
+          fontDMSerifText.variable,
+          fontBricolageGrotesque.variable
         )}
       >
         <NextIntlClientProvider>

src/assets/fonts/index.ts

@@ -1,5 +1,5 @@
+import { DM_Mono, DM_Sans, DM_Serif_Text } from 'next/font/google';
 import localFont from 'next/font/local';
-import { Source_Serif_4 } from 'next/font/google';
 
 /**
  * This file shows how to customize the font by using local font or google font
@@ -16,13 +16,6 @@ export const fontBricolageGrotesque = localFont({
   variable: '--font-bricolage-grotesque',
 });
 
-// https://gwfh.mranftl.com/fonts/dm-sans?subsets=latin
-// download this font with weight 500
-export const fontDMSans = localFont({
-  src: './dm-sans-v15-latin-500.woff2',
-  variable: '--font-dm-sans',
-});
-
 /**
  * [2] use google font
  *
@@ -32,8 +25,23 @@ export const fontDMSans = localFont({
  * 2. CSS and font files are downloaded at build time and self-hosted with the rest of your static assets.
  * https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts
  */
-export const fontSourceSerif4 = Source_Serif_4({
+export const fontDMSans = DM_Sans({
   subsets: ['latin'],
   display: 'swap',
-  variable: '--font-source-serif',
+  variable: '--font-dm-sans',
+  weight: ['500', '600', '700'],
+});
+
+export const fontDMMono = DM_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-dm-mono',
+  weight: ['300', '400', '500'],
+});
+
+export const fontDMSerifText = DM_Serif_Text({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-dm-serif-text',
+  weight: ['400'],
 });

tailwind.config.ts

@@ -11,17 +11,20 @@ export default {
     	extend: {
     		fontFamily: {
     			sans: [
-    				'var(--font-geist-sans)'
+    				'var(--font-dm-sans)'
     			],
     			mono: [
-    				'var(--font-geist-mono)'
+    				'var(--font-dm-mono)'
     			],
     			serif: [
-    				'var(--font-source-serif)'
+    				'var(--font-dm-serif-text)'
     			],
     			bricolage: [
     				'var(--font-bricolage-grotesque)'
-    			]
+    			],
+				heading: [
+					'var(--font-dm-sans)'
+				]
     		},
     		colors: {
     			background: 'hsl(var(--background))',