N

Nokfa Docs

framework-next.js
project
style
tool-git

Current: framework-next.js

สารบัญ

ไม่มีชื่อบทความ

เยี่ยมเลยจ้ะ คำถามนี้ดีมาก!
ถ้าคุณต้องการให้ p, h1, h2, h3 ใช้ ฟอนต์ต่างกัน เหมือนเวลาเขียนใน globals.css แบบนี้:

h1 {
  font-family: 'Kanit', sans-serif;
}
p {
  font-family: 'Sarabun', sans-serif;
}

แต่ตอนนี้ใช้ next/font/google แทน @import แล้ว เราจะต้อง ดึงฟอนต์หลายตัวเข้ามาผ่านโมดูล แล้วนำ className ไปกำหนดใน global CSS หรือผ่าน Tailwind จ้ะ

✅ วิธีทำให้ p , h1 , h2 , h3 ใช้ฟอนต์ต่างกัน ด้วย next/font/google

1. นำเข้าหลายฟอนต์ใน layout.tsx

import './globals.css';
import { Kanit, Sarabun, Rubik } from 'next/font/google';

const kanit = Kanit({
  subsets: ['thai'],
  weight: ['400', '700'],
  variable: '--font-kanit',
});

const sarabun = Sarabun({
  subsets: ['thai'],
  weight: ['300', '400', '600'],
  variable: '--font-sarabun',
});

const rubik = Rubik({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-rubik',
});

export default function RootLayout({ children }) {
  return (
    <html lang="th" className={`${kanit.variable} ${sarabun.variable} ${rubik.variable}`}>
      <body>{children}</body>
    </html>
  );
}

2. ปรับ globals.css ให้ใช้ฟอนต์ตาม tag

/* globals.css */
h1 {
  font-family: var(--font-kanit), sans-serif;
}

h2, h3 {
  font-family: var(--font-rubik), sans-serif;
}

p {
  font-family: var(--font-sarabun), sans-serif;
}

✅ ผลลัพธ์:

  • h1 ใช้ฟอนต์ Kanit
  • h2, h3 ใช้ Rubik
  • p ใช้ Sarabun

และทั้งหมดโหลดแบบ ประสิทธิภาพสูง ไม่ต้องพึ่ง @import เลยจ้ะ

🎁 เสริม: ใช้ร่วมกับ Tailwind ก็ได้

ถ้าอยากกำหนด font ผ่าน class เช่น font-sarabun, font-kanit ก็แค่เพิ่มใน tailwind.config.js:

theme: {
  extend: {
    fontFamily: {
      kanit: ['var(--font-kanit)', 'sans-serif'],
      sarabun: ['var(--font-sarabun)', 'sans-serif'],
      rubik: ['var(--font-rubik)', 'sans-serif'],
    },
  },
}

จากนั้นจะใช้ได้แบบนี้:

<h1 className="font-kanit text-3xl">หัวข้อ</h1>
<p className="font-sarabun">เนื้อหา</p>

อยากให้ช่วยตั้งค่าทั้งโครงแบบพร้อมใช้ไหม? เดี๋ยวจัดให้ได้หมดเลยจ้า 🧡