การติดตั้งฟอนต์ แบบ self-host เพื่อใช้งานใน Next.js

Web Development

การติดตั้งฟอนต์ แบบ self-host เพื่อใช้งานใน Next.js

ในบทความนี้ผมจะพามาดูวิธีการติดตั้งฟอนต์ใน Next.js แบบไม่ต้องใช้ CDN หรือที่เรียกว่า self-host

3 เดือนที่ผ่านมา

1 min read

ในการนำฟอนต์ที่เราอยากได้มาใช้งานใน Next.js Project ก็มีหลากหลายวิธีด้วยกัน แต่วิธีที่ผมจะมานำเสนอในบทความนี้ จะเป็นวิธีการติดตั้งฟอนต์ลงไปใน package ของ project ของเราเลย ซึ่งเป็นวิธีที่ผมรู้สึกว่าง่ายแถมไม่ต้องเรียกใช้งาน CDN ภายนอกด้วย

Select Font

เริ่มจากเข้าไปที่เว็บ https://fontsource.org แล้วเลือกฟอนต์ที่เราต้องการ อย่างเช่นในตัวอย่างนี้ผมจะเลือก Anuphan

Anuphan | Fontsource
Anuphan | Fontsource

Install

ให้เราเลือกไปที่ Static จากนั้นก็เลือกวิธีการการติดตั้งตาม package manager ที่เราใช้ ในตัวอย่างนี้ผมจะใช้ pnpm

Getting Started
Getting Started

ติดตั้งลงไปใน Project ของเรา

install font via pnpm
install font via pnpm

Import Font to Project

กลับมาที่ Next.js project ของเรา

ทำการ copy import css ทั้งหมดจากเว็บ fontsource ไปใส่ไว้ใน globals.css ของ Next.js

จากนั้นลองเรียกใช้ font ตัวอย่างนี้ผมจะขอใช้ font ใน tag h1

Import font in css
Import font in css

เช็ค layout.tsx อีกที ว่าเรามีการเรียกใช้ css file แล้ว

Import CSS in layout
Import CSS in layout

Use Font

สุดท้ายแล้ว มาลองใช้งานในหน้า Home.tsx กันดูหน่อย

use font in Home
use font in Home

ขึ้นแบบนี้ก็แสดงว่าเราติดตั้งฟอนต์และเรียกใช้งานได้สำเร็จแล้ว

Result
Result

Work with TailwindCSS

เราสามารถนำฟอนต์ไปใช้งานร่วมกับ TailwindCSS ได้ด้วยนะ วิธีการคือเรามาทำการเพิ่มฟอนต์ไว้ที่ tailwind.config.js โดยการเพิ่มในส่วน fontFamily ของตัวอย่างนี้ จากนั้นตั้งชื่อฟอนต์พร้อมกับ value ของฟอนต์ที่เราจะใช้ จะคล้ายกับที่เราทำใน globals.css แต่ไม่ต้องกำหนดว่าจะใช้กับ html tag หรือ class ไหนบ้าง

add font to tailwind.config.js
add font to tailwind.config.js

จากนั้นเราก็เรียกใช้ฟอนต์ผ่าน class โดย class ที่จะใช้คือ font-[ชื่อที่เราตั้งใน tailwind.config.js] อย่างในตัวอย่างก็จะเป็น font-anuphan

call font via class in Home
call font via class in Home

เพียงเท่านี้เราก็สามารถใช้งานฟอนต์ได้แล้ว

Result
Result

เพียงเท่านี้เราก็สามารถใช้งานฟอนต์ได้ไม่ต่างจากวิธีการที่แล้วเลย ซึ่งถ้าใครไม่ได้ใช้ TailwindCSS ก็สามารถใช้ได้ตามวิธีการแรกได้เลย

วิธีการนี้ไม่เพียงใช้ได้กับ Next.js เท่านั้นนะครับ JS Framework อื่นๆ ก็คิดว่าใช้ได้เหมือนกัน เพราะหลักการก็แค่ ติดตั้ง แล้ว import เข้า css จากนั้นก็เรียกใช้ จบ

Tags:

Next.js

บทความอื่นๆ

ดูความที่คุณอาจจะสนใจ ได้จากบทความข้างใต้นี้