Font Display

Font Display là gì?

Font-display là một thuộc tính CSS dùng để kiểm soát cách trình duyệt xử lý phông chữ tùy chỉnh (custom font) trong quá trình tải — cụ thể là quyết định khi nào hiển thị văn bản: chờ phông tải xong, dùng phông dự phòng ngay, hay hoán đổi sau.

Thuộc tính này được thêm vào khai báo @font-face, không áp dụng trên các phần tử HTML. Giá trị hợp lệ gồm: auto, block, swap, fallback, và optional. Mỗi giá trị quy định một chiến lược khác nhau cho font loading timeline — khoảng thời gian từ lúc yêu cầu phông đến lúc hiển thị văn bản.

Tại sao quan trọng trong SEO?

Font-display ảnh hưởng trực tiếp đến hai chỉ số Core Web Vitals: Largest Contentful Paint (LCP) và Cumulative Layout Shift (CLS).

• LCP: Nếu trình duyệt chặn hiển thị văn bản vì chờ phông tải (block với thời gian dài), LCP bị trì hoãn → điểm xếp hạng giảm.
• CLS: Khi phông tải xong rồi thay thế phông dự phòng (ví dụ từ Arial sang Inter), kích thước chữ thay đổi → nội dung dịch chuyển bất ngờ → CLS tăng.

Google xác nhận rằng trải nghiệm người dùng (UX) là yếu tố xếp hạng rõ ràng. Một trang chậm hiển thị văn bản hoặc nhảy layout do phông chữ sẽ làm tăng tỷ lệ thoát và giảm thời gian ở lại — cả hai đều là tín hiệu gián tiếp ảnh hưởng SEO.

Cách hoạt động

Mỗi giá trị font-display chia chu kỳ tải phông thành hai giai đoạn chính:

1. Giai đoạn chặn (block period): Trình duyệt không hiển thị văn bản, chỉ dùng phông dự phòng nếu có — nhưng giữ chỗ trống hoặc ẩn nội dung.
2. Giai đoạn hoán đổi (swap period): Sau khi hết thời gian chặn, trình duyệt hiển thị văn bản bằng phông dự phòng, rồi thay thế bằng phông tùy chỉnh khi tải xong.

Thời gian mặc định của mỗi giai đoạn phụ thuộc vào trình duyệt và không công bố chính thức. Ví dụ: Chrome hiện nay áp dụng khoảng 3 giây cho block period với block, và ~100ms với swap — nhưng con số này có thể thay đổi theo phiên bản.

Hướng dẫn thực hiện

Để thiết lập font-display, bạn cần chỉnh sửa phần khai báo @font-face trong CSS (hoặc tệp CSS được import). Không dùng trong style inline hay thẻ <style> động.

1. Bước 1: Xác định tất cả phông tùy chỉnh đang dùng (qua DevTools > Network > filter "font").
2. Bước 2: Với mỗi khai báo @font-face, thêm dòng font-display: swap; (được khuyến nghị cho đa số trường hợp).
3. Bước 3: Kiểm tra bằng Web.dev Font Display Tool hoặc DevTools > Rendering > bật "Show fonts" để quan sát hành vi.
4. Bước 4: Đo lại LCP và CLS trên PageSpeed Insights hoặc CrUX Dashboard để so sánh trước/sau.

Lưu ý: Nếu dùng Google Fonts, hãy thêm tham số &display=swap vào URL (ví dụ: https://fonts.googleapis.com/css2?family=Inter&display=swap). Đây là cách nhanh nhất để áp dụng swap mà không cần chỉnh CSS thủ công.

Lỗi thường gặp

• Lỗi 1: Dùng font-display: block cho phông tiêu đề chính
  → Gây delay hiển thị nội dung quan trọng, làm LCP vượt ngưỡng tốt (≥2.5s). Cách khắc phục: Chỉ dùng block nếu phông bắt buộc phải hiển thị đúng — ví dụ logo dạng text trong banner; còn lại nên ưu tiên swap hoặc fallback.
• Lỗi 2: Thiếu khai báo font-display khi tự host phông
  → Trình duyệt mặc định áp dụng auto, tương đương block trên nhiều nền tảng. Cách khắc phục: Luôn khai báo rõ ràng — không phụ thuộc vào hành vi mặc định.
• Lỗi 3: Kết hợp swap với phông có độ rộng khác biệt lớn so với phông dự phòng
  → Gây layout shift mạnh khi hoán đổi. Cách khắc phục: Dùng font-size-adjust, size-adjust (tùy trình duyệt), hoặc chọn phông dự phòng có metrics gần giống (ví dụ: Inter ↔ system-ui; Roboto ↔ Helvetica).

Ví dụ thực tế

Dưới đây là khai báo @font-face chuẩn với font-display: swap:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Và bảng so sánh hành vi giữa các giá trị:

Giá trị	Block period	Swap period	Hiển thị văn bản	Phù hợp khi
auto	Tùy trình duyệt	Tùy trình duyệt	Không đảm bảo	Không nên dùng — thiếu kiểm soát
block	~3s (Chrome)	Vô hạn	Chỉ sau khi phông tải xong	Logo, biểu tượng bắt buộc đúng font
swap	~100ms	Vô hạn	Ngay lập tức bằng phông dự phòng → hoán đổi sau	Hầu hết văn bản nội dung (tiêu đề, bài viết)
fallback	~100ms	~3s	Hiển thị bằng phông dự phòng → không hoán đổi nếu quá 3s	Phông ít quan trọng, ưu tiên ổn định layout
optional	~100ms	Không có	Chỉ hiển thị bằng phông dự phòng — bỏ qua phông tùy chỉnh nếu tải chậm	Trang cực nhẹ, mạng yếu, hoặc A/B test

Câu hỏi thường gặp

Font-display có ảnh hưởng đến khả năng đọc (accessibility)?

Không — font-display chỉ điều khiển thời điểm hiển thị, không thay đổi thuộc tính a11y như contrast, kích thước hay role. Tuy nhiên, nếu dùng block quá lâu, người dùng khiếm thị dùng screen reader có thể nghe nội dung muộn hơn — vì trình duyệt chưa render DOM đầy đủ. Nên ưu tiên swap để đảm bảo nội dung khả dụng sớm nhất.

Có nên dùng font-display cho tất cả phông?

Có, nhưng cần phân loại. Phông dùng cho tiêu đề, đoạn văn, nút — nên dùng swap. Phông dùng cho icon (ví dụ: Font Awesome) hoặc biểu tượng đặc biệt — nên dùng block hoặc optional, tùy mức độ phụ thuộc vào hình ảnh. Không áp dụng đồng loạt mà không đánh giá vai trò từng phông.

Font-display có tương thích với mọi trình duyệt?

Hỗ trợ từ Chrome 60, Firefox 60, Safari 11.1, Edge 17. Các trình duyệt cũ hơn (IE11, Safari ≤10) bỏ qua thuộc tính này và dùng hành vi mặc định — không gây lỗi, nhưng cũng không được tối ưu. Nếu cần hỗ trợ IE11, nên kết hợp với kỹ thuật fontfaceobserver hoặc load phông qua JavaScript có kiểm soát.