ในการนำฟอนต์ที่เราอยากได้มาใช้งานใน Next.js Project ก็มีหลากหลายวิธีด้วยกัน แต่วิธีที่ผมจะมานำเสนอในบทความนี้ จะเป็นวิธีการติดตั้งฟอนต์ลงไปใน package ของ project ของเราเลย ซึ่งเป็นวิธีที่ผมรู้สึกว่าง่ายแถมไม่ต้องเรียกใช้งาน CDN ภายนอกด้วย
Select Font
เริ่มจากเข้าไปที่เว็บ https://fontsource.org แล้วเลือกฟอนต์ที่เราต้องการ อย่างเช่นในตัวอย่างนี้ผมจะเลือก Anuphan
![Anuphan | Fontsource](/images/posts/nextjs-self-host-fonts/01-select-font.png)
Install
ให้เราเลือกไปที่ Static จากนั้นก็เลือกวิธีการการติดตั้งตาม package manager ที่เราใช้ ในตัวอย่างนี้ผมจะใช้ pnpm
![Getting Started](/images/posts/nextjs-self-host-fonts/02-getstart.png)
ติดตั้งลงไปใน Project ของเรา
![install font via pnpm](/images/posts/nextjs-self-host-fonts/03-install-font.png)
Import Font to Project
กลับมาที่ Next.js project ของเรา
ทำการ copy import css ทั้งหมดจากเว็บ fontsource ไปใส่ไว้ใน globals.css
ของ Next.js
![](/images/posts/nextjs-self-host-fonts/03.png)
จากนั้นลองเรียกใช้ font ตัวอย่างนี้ผมจะขอใช้ font ใน tag h1
![Import font in css](/images/posts/nextjs-self-host-fonts/04-import-font-in-css.png)
เช็ค layout.tsx
อีกที ว่าเรามีการเรียกใช้ css file แล้ว
![Import CSS in layout](/images/posts/nextjs-self-host-fonts/05-import-css-in-layout.png)
Use Font
สุดท้ายแล้ว มาลองใช้งานในหน้า Home.tsx
กันดูหน่อย
![use font in Home](/images/posts/nextjs-self-host-fonts/06-hometsx.png)
ขึ้นแบบนี้ก็แสดงว่าเราติดตั้งฟอนต์และเรียกใช้งานได้สำเร็จแล้ว
![Result](/images/posts/nextjs-self-host-fonts/07-result.png)
Work with TailwindCSS
เราสามารถนำฟอนต์ไปใช้งานร่วมกับ TailwindCSS ได้ด้วยนะ วิธีการคือเรามาทำการเพิ่มฟอนต์ไว้ที่ tailwind.config.js
โดยการเพิ่มในส่วน fontFamily
ของตัวอย่างนี้ จากนั้นตั้งชื่อฟอนต์พร้อมกับ value ของฟอนต์ที่เราจะใช้ จะคล้ายกับที่เราทำใน globals.css
แต่ไม่ต้องกำหนดว่าจะใช้กับ html tag หรือ class ไหนบ้าง
![add font to tailwind.config.js](/images/posts/nextjs-self-host-fonts/08-add-font-to-tailwind.png)
จากนั้นเราก็เรียกใช้ฟอนต์ผ่าน class
โดย class ที่จะใช้คือ font-[ชื่อที่เราตั้งใน tailwind.config.js] อย่างในตัวอย่างก็จะเป็น font-anuphan
![call font via class in Home](/images/posts/nextjs-self-host-fonts/09-use-font-in-hometsx.png)
เพียงเท่านี้เราก็สามารถใช้งานฟอนต์ได้แล้ว
![Result](/images/posts/nextjs-self-host-fonts/10-result-tailwind.png)
เพียงเท่านี้เราก็สามารถใช้งานฟอนต์ได้ไม่ต่างจากวิธีการที่แล้วเลย ซึ่งถ้าใครไม่ได้ใช้ TailwindCSS ก็สามารถใช้ได้ตามวิธีการแรกได้เลย
วิธีการนี้ไม่เพียงใช้ได้กับ Next.js เท่านั้นนะครับ JS Framework อื่นๆ ก็คิดว่าใช้ได้เหมือนกัน เพราะหลักการก็แค่ ติดตั้ง แล้ว import เข้า css จากนั้นก็เรียกใช้ จบ