font-display là CSS descriptor điều khiển hành vi trình duyệt khi font đang tải — hiển thị fallback ngay hay ẩn chữ trong thời gian chờ. Bài giải thích 5 giá trị (auto, block, swap, fallback, optional), đánh đổi FOIT/FOUT và cách chọn đúng cho shop WordPress 2026.
font-display là gì và tại sao quan trọng
font-display là CSS descriptor nằm trong khai báo @font-face, cho phép kiểm soát hành vi tải font. Trước năm 2016, trình duyệt mặc định “block 3 giây” — chữ biến mất 3 giây nếu font chậm.
Đặt font-display đúng là cách đơn giản nhất để tránh trải nghiệm chờ chữ xuất hiện trên site.
4 giai đoạn tải font
- Giai đoạn block: trình duyệt render chữ vô hình, đợi font custom tải xong. Mặc định 3 giây.
- Giai đoạn swap: trình duyệt render chữ bằng font fallback (sans-serif, serif), đổi khi font custom sẵn sàng.
- Giai đoạn failure: font không tải được trong thời gian giới hạn, trình duyệt dùng fallback vĩnh viễn.
- Loaded: font sẵn sàng — trình duyệt đổi từ fallback sang font custom nếu còn trong swap period.
Ảnh hưởng đến Core Web Vitals
font-display tác động đến FCP (block period ẩn chữ trì hoãn FCP) và CLS (swap muộn gây dịch chuyển bố cục). Xem thêm tại bài fix CLS và bài so sánh FCP và LCP.
Kết hợp font-display đúng với tự host font là cách tối ưu font hiệu quả nhất.
5 giá trị font-display
CSS spec định nghĩa 5 giá trị. Mỗi giá trị cấu hình 4 giai đoạn khác nhau, mang lại đánh đổi khác nhau giữa FOIT và FOUT.
auto — để trình duyệt tự quyết
Trình duyệt tự chọn hành vi — thường giống “block” với block period 3 giây. Không khuyến nghị dùng auto vì không nhất quán giữa các trình duyệt.
Luôn đặt giá trị rõ ràng thay vì để mặc định auto.
block — ẩn chữ tối đa 3 giây
Block period 3 giây + swap period vô hạn. Chữ ẩn 3 giây, hiển thị fallback nếu font chưa tải, đổi sang font custom khi sẵn sàng.
Use case: logo có brand identity quan trọng, không chấp nhận render sai font. Đổi lại: người dùng thấy khoảng trắng 3 giây — tệ cho trải nghiệm trên mạng chậm.
swap — khuyến nghị cho hầu hết trường hợp
Block period 0ms + swap period vô hạn. Render fallback ngay lập tức, đổi khi font custom tải xong.
Use case: body text, tiêu đề chính — người dùng cần đọc ngay, FOUT tốt hơn FOIT.
Đổi lại: FOUT (chữ fallback rồi đổi font) có thể gây CLS nếu fallback khác metric font custom nhiều.
fallback — cân bằng
Block period 100ms + swap period 3 giây + sau đó dùng fallback vĩnh viễn. Block rất ngắn, swap nhanh nếu font tải trong 3 giây, font tải muộn hơn không được swap.
Use case: tiêu đề bổ trợ không quan trọng. Tránh swap muộn gây CLS bất ngờ sau khi người dùng đã đọc.
optional — ưu tiên tốc độ
Block period 100ms + không swap. Nếu font không có trong cache và tải lâu hơn 100ms, trình duyệt dùng fallback luôn.
Font custom tiếp tục tải nền cho lần truy cập sau — lần thứ hai người dùng thấy font custom.
Use case: font trang trí không thiết yếu. Đổi lại: người dùng lần đầu không thấy font custom.
Bảng so sánh 5 giá trị
Chọn đúng giá trị tuỳ vào tầm quan trọng của font với trải nghiệm người dùng.
| Giá trị | Block period | Swap period | Tác động UX | Khuyến nghị |
|---|---|---|---|---|
| auto | 3s (trình duyệt quyết) | Vô hạn | Không nhất quán | Tránh dùng |
| block | 3s | Vô hạn | FOIT 3 giây | Logo brand critical |
| swap | 0ms | Vô hạn | FOUT + swap muộn có thể gây CLS | Body text, H1/H2 |
| fallback | 100ms | 3s | FOIT ngắn + swap nhanh | Tiêu đề bổ trợ |
| optional | 100ms | 0ms | Fallback vĩnh viễn lần đầu | Font trang trí |
Hỗ trợ trình duyệt
font-display hỗ trợ ~96% toàn cầu năm 2026: Chrome 60+, Firefox 58+, Safari 11.1+, Edge 79+. Trình duyệt cũ bỏ qua property và dùng hành vi mặc định — không có rủi ro làm vỡ layout.
FOIT vs FOUT — chọn vấn đề ít tệ hơn
FOIT (chữ ẩn) và FOUT (fallback hiển thị rồi đổi) là 2 đánh đổi chính khi tải font. Không có lựa chọn hoàn hảo cho mọi tình huống.
Khi nào FOIT tệ hơn FOUT
FOIT tệ hơn FOUT trong phần lớn trường hợp. Người dùng thấy khoảng trắng 3 giây không đọc được — cảm giác site bị lỗi.
Trên mạng 3G hoặc di động yếu, 3 giây là rất lâu.
FOUT tạo trải nghiệm tốt hơn: người dùng đọc được ngay bằng fallback, chấp nhận chuyển font nhẹ sau đó. Tốt hơn FOIT cho ~90% trường hợp thực tế.
Khi FOUT gây vấn đề
FOUT nghiêm trọng nhất khi metric fallback khác nhiều so với font custom — gây dịch chuyển bố cục (CLS) lớn khi swap. Người dùng đang đọc bỗng thấy text nhảy vị trí.
Dùng font-display: fallback để giới hạn swap period 3 giây — font tải muộn hơn sẽ không được swap, tránh CLS bất ngờ.
Giảm tác động FOUT qua size-adjust
CSS descriptor size-adjust, ascent-override, descent-override trong @font-face fallback điều chỉnh metric fallback match gần với font custom. Swap xảy ra nhưng không làm bố cục dịch chuyển.
Công cụ kiểm tra và tính toán giá trị: tools.pixelambacht.nl/fontmetrics. Xem chi tiết CLS tại bài fix CLS — layout shift.
Hướng dẫn chọn giá trị cho shop WordPress VN
Bảng dưới áp dụng được cho phần lớn shop thương mại điện tử tại VN năm 2026.
| Vị trí font | font-display | Lý do |
|---|---|---|
| Body text (đoạn văn) | swap | Người dùng cần đọc ngay, FOUT tốt hơn FOIT |
| Tiêu đề H1/H2 | swap | Quan trọng về hiển thị, không nên block |
| Logo SVG font | block | Brand critical, chấp nhận FOIT ngắn |
| Tiêu đề H3+ bổ trợ | fallback | Không quan trọng, tránh swap muộn gây CLS |
| Font trang trí (quote, badge) | optional | Bỏ qua nếu chậm, không ảnh hưởng trải nghiệm |
| Icon font (FontAwesome) | block | Render fallback ký tự ngẫu nhiên — tệ hơn ẩn |
Đặt font-display trong @font-face
@font-face {
font-family: 'Inter';
font-weight: 400;
font-display: swap; /* body text */
src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'InterDecor';
font-weight: 400;
font-display: optional; /* font trang trí */
src: url('/fonts/inter-decor.woff2') format('woff2');
}Khi dùng plugin OMGF
Plugin OMGF tự động thêm font-display: swap cho toàn bộ font khi self-host. Nếu cần giá trị khác (fallback, optional) cho font cụ thể, override thủ công trong CSS của theme sau khi plugin tạo @font-face.
Checklist áp dụng cho shop
Danh sách kiểm tra trước khi bàn giao site cho khách hàng.
Kiểm tra font-display
- Mọi @font-face đều có khai báo
font-displayrõ ràng, không để auto. - Font body text và H1/H2 dùng
font-display: swap. - Icon font (FontAwesome, Material Icons) dùng
font-display: block. - Font trang trí không thiết yếu dùng
font-display: optional. - Kiểm tra CLS sau khi swap bằng DevTools tab Performance.
- Nếu CLS cao khi swap: thêm
size-adjustvào fallback font.
Xác nhận qua DevTools Performance
Mở DevTools → tab Performance → record tải trang. Tìm event “Layout Shift” trong timeline để xem nguyên nhân.
Nếu nguyên nhân là font swap, đây là vấn đề CLS cần xử lý bằng size-adjust.
Xem thêm cách đo và fix CLS tại bài fix CLS.
Bài liên quan
font-display là một phần trong bộ tối ưu font toàn diện. Đọc thêm các bài liên quan.
- Self-host Google Font — 5 bước hoàn chỉnh
- Fix CLS — font swap gây dịch chuyển bố cục
- FCP vs LCP — phân biệt và tối ưu từng chỉ số
- Core Web Vitals 2026 — tổng quan 3 chỉ số
- LCP — cách đo và tối ưu
Câu hỏi thường gặp
Tại sao swap gây CLS?
Khi swap từ fallback sang font custom, nếu 2 font có metric khác nhau (chiều cao chữ, khoảng cách dòng), trình duyệt reflow bố cục. Các element phía dưới dịch chuyển → CLS tăng.
Sửa bằng CSS descriptor size-adjust + ascent-override trong @font-face fallback để metric khớp font custom. Công cụ kiểm tra: tools.pixelambacht.nl/fontmetrics.
Trình duyệt hỗ trợ font-display thế nào?
Hỗ trợ phổ biến ~96% toàn cầu năm 2026: Chrome 60+, Firefox 58+, Safari 11.1+, Edge 79+.
Trình duyệt cũ bỏ qua property và dùng hành vi mặc định (thường là block 3 giây). Không có rủi ro làm vỡ layout.
Plugin WordPress có tự động đặt font-display không?
Plugin OMGF (Optimize My Google Fonts) tự động thêm font-display: swap khi self-host font. Plugin “Async Google Fonts” cũng có tính năng này.
WordPress core không tự đặt — phải khai báo trong @font-face thủ công hoặc qua plugin.
Variable font có dùng font-display được không?
Được, hoạt động y hệt font tĩnh. Variable font 1 file nhiều weight — font-display áp dụng chung cho toàn bộ các weight.
Khai báo @font-face với format "woff2-variations" và range font-weight: 100 900 cho variable font.
Nên dùng swap hay fallback cho tiêu đề H2?
swap — vì H2 là nội dung quan trọng người dùng cần đọc ngay. FOUT ít tệ hơn FOIT đối với nội dung chính.
Dùng fallback khi H2 chỉ là trang trí (heading nhỏ sidebar, widget) và không ảnh hưởng nhiều nếu hiển thị fallback lâu hơn 3 giây.
Cần tối ưu font và cải thiện CLS cho site WordPress? Web22 cung cấp dịch vụ tối ưu Core Web Vitals — bao gồm audit font, font-display và sửa CLS.
