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.

import { Manrope, Roboto } from "next/font/google" 

// Khai báo
const manrope = Manrope({ subsets: ["latin"] })
const roboto = Roboto({ subsets: ["latin"], weight: ["400", "500"]}) 

// Sử dụng
{children}
Pham Van Tu

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

// Khai báo variable
export const manrope = Manrope({ subsets: ["latin"], variable: "--font-manrope", })
export const roboto = Roboto({ subsets: ["latin"], variable: "--font-roboto", weight: ["400", "500"], })

// Khai báo variable sử dụng
 {children} 

// Defined common
body {
  font-family: var(--font-manrope)
}
p {
  font-family: var(--font-roboto)
}

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

theme: {
    extend: {
      fontFamily: {
        primary: ["var(--font-manrope)"],
        secondary: ["var(--font-roboto)"],
      },
    },
},

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

import localFont from "next/font/local";

// Nếu mà font có 1 style thôi thì ae có thể để string thôi cũng được cho ngắn gọn
const dm_sans = localFont({
  src: "" || [
    {
      path: "",
      weight: "",
      style: "italic",
    },
  ],
  display: "swap",
});

``

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 🤭

``