ไม่มีชื่อบทความ
คำถามนี้ดีมากเลยจ้ะ! ❤️
เวลาจะใช้ฟอนต์จาก next/font/google แล้วสงสัยว่า “จะรู้ได้ยังไงว่าฟอนต์ไหน import ได้บ้าง?”
คำตอบคือ: เราสามารถดูรายชื่อทั้งหมดของฟอนต์ที่ next/font/google รองรับได้จาก:
✅ วิธีที่ 1: ดูจาก autocomplete ใน VS Code
ถ้าใช้ VS Code แล้วพิมพ์แบบนี้:
import { } from 'next/font/google';
จากนั้นวางเมาส์ระหว่าง { } มันจะขึ้นลิสต์ฟอนต์ทั้งหมดที่รองรับให้เลยอัตโนมัติ (autocomplete)
เช่น:
import { Kanit, Sarabun, Prompt, Inter, Roboto, Noto_Sans_Thai } from 'next/font/google';
✅ วิธีที่ 2: ดูจากเว็บอย่างเป็นทางการของ Next.js
🔗 Google Fonts in next/font – Next.js Docs
ในหน้านี้มีตัวอย่างฟอนต์ยอดนิยมและลิงก์ไปยัง Google Fonts ด้วย
✅ วิธีที่ 3: ลองค้นใน Google Fonts ก่อน แล้วค่อยใช้ชื่อใน next/font/google
ตัวอย่างชื่อฟอนต์ที่ใช้ได้:
| Google Fonts Name | วิธี import ใน Next.js |
|---|---|
| Inter | import { Inter } from 'next/font/google' |
| Roboto | import { Roboto } from 'next/font/google' |
| Kanit | import { Kanit } from 'next/font/google' |
| Sarabun | import { Sarabun } from 'next/font/google' |
| Rubik | import { Rubik } from 'next/font/google' |
| Noto Sans Thai | import { Noto_Sans_Thai } from 'next/font/google' |
| Prompt | import { Prompt } from 'next/font/google' |
✅ ฟอนต์ที่ชื่อมีเว้นวรรค เช่น
Noto Sans Thai→ ต้องใช้_แทนช่องว่าง:Noto_Sans_Thai
💡 เคล็ดลับ
ถ้าฟอนต์ไหน ไม่มีในระบบ แล้วลอง import เช่น:
import { SomeFont } from 'next/font/google';
มันจะขึ้น error แบบนี้:
❌
SomeFont is not exported from 'next/font/google'
แปลว่าใช้ไม่ได้ หรือพิมพ์ชื่อผิด
อยากให้ช่วยหา font ภาษาไทยสวย ๆ หรือฟอนต์แนวเฉพาะกลุ่มก็ขอได้นะจ๊ะ
จัด list ให้ได้เลย 😎