ไม่มีชื่อบทความ
โอ้ ขอบคุณที่ถามกลับเลยจ้ะ! ขออธิบายให้ ชัดเจนขึ้น นิดนึงนะ:
🔍 ประเด็นคือ:
"ใช้ next/font/google ร่วมกับ globals.css ได้ไหม?"
✅ คำตอบคือ:
"ใช้ร่วมกันได้จ้ะ ถ้าใช้ผ่าน CSS variables ที่ next/font/google กำหนดให้"
🤔 แล้วที่ก่อนหน้านี้บอกว่า "ใส่ใน globals.css ไม่ได้" หมายถึงอะไร?
สิ่งที่หมายถึงคือ:
❌ "ไม่สามารถใส่
@import 'next/font/google';ลงในglobals.cssได้"
เพราะ next/font/google มันไม่ใช่ CSS module แต่เป็น JavaScript/TypeScript module
ดังนั้นจะ ต้อง import ในไฟล์ .ts, .tsx เท่านั้น
✅ วิธีที่ถูกต้องในการ "ใช้ next/font/google กับ globals.css " คือ:
- Import ฟอนต์ใน
layout.tsx - ใช้
variable: '--font-[name]' - เอาค่า variable ไปใช้ใน
globals.cssได้เลย!
📦 สรุปด้วยภาพรวม
| สิ่งที่ทำได้ | ทำยังไง |
|---|---|
✅ ใช้ next/font/google กับ globals.css |
ผ่าน CSS variables (--font-xxx) |
❌ ใช้ @import 'next/font/google' ใน globals.css |
ไม่ได้ เพราะไม่ใช่ CSS |
✅ ตัวอย่างครบ:
layout.tsx
import './globals.css';
import { Kanit } from 'next/font/google';
const kanit = Kanit({
subsets: ['thai'],
weight: ['400', '700'],
variable: '--font-kanit',
});
export default function RootLayout({ children }) {
return (
<html lang="th" className={kanit.variable}>
<body>{children}</body>
</html>
);
}
globals.css
body {
font-family: var(--font-kanit), sans-serif;
}
ถ้ายังงงนิด ๆ ว่าอยากให้ p, h1, h2 ใช้ฟอนต์แยกกันแบบครบชุด เดี๋ยวจัดตัวอย่างเป็น repo template ให้ได้นะจ๊ะ 😊