next/font tự động tối ưu web font để cải thiện hiệu năng và loại bỏ layout shift — tự host font lúc build và xử lý các chi tiết tải cho bạn.
Dùng một Google Font
tsx
{ } ;
inter = ({
: [],
: ,
});
() {
(
);
}
next/font tự động tối ưu web font để cải thiện hiệu năng và loại bỏ layout shift — tự host font lúc build và xử lý các chi tiết tải cho bạn.
{ } ;
inter = ({
: [],
: ,
});
() {
(
);
}
import localFont from "next/font/local";
const myFont = localFont({ src: "./MyFont.woff2", display: "swap" });
Font là một vấn đề hiệu năng và CLS kinh điển: một fetch bên thứ ba chặn việc render text, rồi gây ra một cú nhảy layout khi font tải xong (FOUT/FOIT). Làm việc này tốt bằng tay đòi hỏi @font-face, font-display, preloading, và khớp metric fallback.
next/font tự động hóa toàn bộ checklist hiệu năng font — tự host (tốc độ + quyền riêng tư), subsetting và preloading (nhỏ hơn, nhanh hơn), và khớp metric fallback (không layout shift) — sau một lệnh import.
Nó loại bỏ một tối ưu rườm rà, dễ làm sai và là cách được khuyến nghị để dùng cả Google Font lẫn font cục bộ trong Next.js.