Cách thêm font tùy chỉnh vào website

1. Chuẩn bị file font

Kiểm tra giấy phép để chắc chắn font được phép dùng trên web. Sau đó kéo file TTF hoặc OTF vào Webfont Generator và tải về file ZIP. Thường bạn chỉ cần các file WOFF2.

2. Tải file lên

Sao chép thư mục fonts vào website, ví dụ vào /fonts/. Font phải được tải từ chính tên miền của bạn, hoặc từ máy chủ gửi đúng header Access-Control-Allow-Origin.

3. Thêm các quy tắc @font-face

Mỗi độ đậm và kiểu chữ cần một quy tắc riêng:

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Giữ nguyên tên họ font cho mọi độ đậm. Khi đó trình duyệt sẽ tự chọn đúng file cho chữ thường và chữ đậm.

4. Sử dụng font

body {
  font-family: "Brand Sans", Arial, sans-serif;
}

Luôn khai báo font dự phòng, vì chúng sẽ hiển thị trong lúc font của bạn đang tải hoặc khi tải thất bại.

Thêm font trên các nền tảng phổ biến

• Webflow: vào Site settings → Fonts → Custom fonts và tải lên các file WOFF2 của bạn.
• WordPress: các block theme có thể quản lý font trong thư viện font của Site Editor. Với theme khác, hãy thêm file vào child theme và đặt CSS vào stylesheet của theme con.
• Tailwind CSS: thêm các quy tắc vào CSS, rồi khai báo font như một giá trị trong theme. Tab Tailwind của Webfont Generator sẽ cung cấp sẵn đoạn code.

Kiểm tra xem font đã hoạt động chưa

Mở website, rồi mở công cụ dành cho nhà phát triển trong trình duyệt. Trong tab Network, lọc theo Font và tải lại trang. Mỗi file nên có trạng thái 200. Lỗi 404 thường có nghĩa là đường dẫn trong CSS bị sai. Yêu cầu bị chặn thường liên quan đến header cross-origin. Cuối cùng, chạy Page Speed Test để xem font ảnh hưởng thế nào đến tốc độ tải.