N

Nokfa Docs

framework-next.js
project
style
tool-git

Current: framework-next.js

สารบัญ

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

ถ้าจะใช้ next/font/google ใน Next.js (App Router) เพื่อโหลดฟอนต์ Google แบบ "native และมีประสิทธิภาพสูงกว่า @import" วิธีนี้จะดีกว่าการใช้ @import ใน CSS เพราะ:

  • ฟอนต์ถูก preload อัตโนมัติ
  • ลด FOUT (Flash of Unstyled Text)
  • โหลดเฉพาะน้ำหนักที่เราใช้จริง

✅ วิธีใช้ next/font/google โหลดฟอนต์ Kanit แบบง่าย ๆ:

1. ติดตั้ง (ถ้ายังไม่ได้ติดตั้ง Next 13+ หรือ App Router)

npx create-next-app@latest --experimental-app

2. ไปที่ app/layout.tsx แล้วเพิ่ม:

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

const kanit = Kanit({
  subsets: ['thai'], // หรือ ['latin', 'thai'] ถ้าจะรองรับอังกฤษด้วย
  weight: ['300', '400', '500', '600', '700'], // ใส่เฉพาะที่ใช้
  variable: '--font-kanit', // ใช้ร่วมกับ CSS variable ได้ถ้าต้องการ
  display: 'swap',
});

export const metadata = {
  title: 'My App',
  description: 'แอพของฉัน',
};

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

🔥 หมายเหตุ: className: kanit.className จะใส่ class ลงใน <html> และทำให้ฟอนต์ Kanit ถูกใช้กับทุกอย่างที่สืบทอดมาจาก body

✅ ไม่ต้องใช้ @import ใน CSS อีกแล้ว

เอา @import url(...) ออกไปจาก globals.css ได้เลย เพราะ next/font/google จัดการให้หมด

✅ เพิ่มใน Tailwind (กรณีอยากใช้ class เช่น font-kanit )

หากใช้ Tailwind และอยากให้ font-kanit ใช้ Kanit:

1. เพิ่มใน tailwind.config.js :

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        kanit: ['var(--font-kanit)', 'sans-serif'],
      },
    },
  },
};

2. ใช้ใน HTML:

<h1 className="font-kanit text-2xl">ยินดีต้อนรับ</h1>

🎯 สรุป

วิธี ดีไหม หมายเหตุ
@import ใน CSS 🟡 พอใช้ได้ เรียบง่ายแต่ไม่ประสิทธิภาพสูง
next/font/google ✅ ดีที่สุด โหลดเร็ว, preload, เลือกน้ำหนักได้

อยากให้ช่วยตั้งค่าฟอนต์อื่นเพิ่ม หรือมีปัญหากับ next/font/google ตรงไหนก็บอกได้เลยน้า 😊