N

Nokfa Docs

Current: framework-next.js

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

คำถามนี้ดีมากเลยจ้ะ! ❤️
เวลาจะใช้ฟอนต์จาก 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 ให้ได้เลย 😎