Sử dụng font trong nextjs

  • admin
  • 3 Tháng Sáu, 2024

Say hi những người ae, TuPV comeback đây kaka lâu ngày quá rồi để cái blog mốc mêuuuu luôn á kaka. Thôi thì NextJs ra vừa ra bản NextJs15 RC cách đây mấy ngày thì thôi đu theo luôn cho nó trending tí nhen.

Bài này sẽ là khởi đầu cho những bài về NextJs về sau nha, viết vội chứ chuẩn bị cưới vợ rồi dí lắm 😆. Bài viết này mình sẽ list những cách dùng font như từ google fonts, font weight, variables, multiple fonts, local fonts, tailwind fonts…gét goooooo 😜

Mình sẽ để font ở trong layout.tsx nha. Mặc định cài nextJs đã có next/font và tối ưu luôn cho mình sẵn rồi. Nếu mình dùng link cdn để nhúng font vào thì cũng được okie, nhưng load lần tiên sẽ bị kiểu như nháy 1 phát từ font mặc định sang font mình nhúng cdn, nó chưa apply vô kịp á gọi là Layout Shift cho nó bài bản 😁. Nhưng mà nếu dùng font google có sẵn những font trong này Font Google thì sẽ tự động cache lại bất kỳ font nào ở đây.

Tuỳ font mà nó sẽ yêu cầu weight hay không nhưng thường nên note những font weight mình dùng trong hệ thống và 1 mảng nha. Vì nếu không truyền là nó auto lấy hết font weight của chữ đó có luôn á :D , thừa quá không cần nè.

Dự án sẽ có nhiều font thì mình nên đặt tên biến cho từng font

Vậy sử dụng biến trong Tailwind Css như thế nào và ví dụ như font không có trên google font thì sao nào 👇

Tại file tailwind.config khai báo giúp mình như sau

Khi sử dụng thì đơn giản là <h1 className="font-primary">Phạm Văn Tú </h1> là có font manrope rồi nè

Vậy sử dụng local font dưới máy thì ae bỏ font trong app rồi ae dùng như dưới nha, dùng thì tương như ở trên mình có thể để class trong thẻ body sét fontName.classname là okela rồi

Note: Ae nên sẽ tạo ra 1 file fonts.ts chẳng hạn rồi defined font các kiểu gì đó ra rồi import dùng ở layout cho okie hơn hi. Cái này nextjs khuyến cáo nên zị á 😇 cho nó smooth performer hơn

Đến đây là hết gòi, hóng bài sau cùng TuPV nhen, buy mọi ngườiiiiiiii 🤭

guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận

Nhấn ESC để đóng

0
Rất thích suy nghĩ của bạn, hãy bình luận.x