woff2 là định dạng font web chuẩn 2026 — nén Brotli native, nhẹ hơn woff tới 30%, hỗ trợ trên 96% trình duyệt toàn cầu. Dùng đúng woff2 kết hợp subset tiếng Việt giúp trang tải font nhanh hơn rõ rệt và cải thiện LCP.
woff2 là gì và vì sao dùng 2026
woff2 (Web Open Font Format 2.0) là định dạng font dành riêng cho web, ra chuẩn W3C năm 2014. Điểm khác biệt cốt lõi: dùng thuật toán nén Brotli thay vì gzip như woff cũ.
Brotli cho tỉ lệ nén cao hơn, kết quả là file woff2 nhẹ hơn woff khoảng 30% với cùng chất lượng. So với ttf/otf không nén, mức chênh lên tới 60–70%.
Lịch sử định dạng font web
- ttf/otf: Font hệ điều hành, không nén, thường 200–500KB — tải chậm trên web.
- eot: Định dạng riêng của IE, đã ngừng hỗ trợ cùng IE năm 2022.
- woff (2010): Nén gzip, nhẹ hơn ttf khoảng 50%.
- woff2 (2014): Nén Brotli, nhẹ hơn woff thêm 30%. Chuẩn mặc định từ 2018.
woff2 tác động tới LCP ra sao
Font web load chậm gây ra FOIT — trình duyệt ẩn văn bản trong khi chờ tải. Văn bản đầu trang thường là phần tử LCP.
Dùng woff2 subset + font-display: swap + preload giảm thời gian chờ font, giúp LCP về ngưỡng an toàn dưới 2,5 giây. Đọc thêm về cách tối ưu LCP toàn diện.
So sánh định dạng font web 2026
| Định dạng | Kích thước điển hình | Nén | Hỗ trợ trình duyệt 2026 | Dùng khi nào |
|---|---|---|---|---|
| ttf/otf | ~250KB | Không | Mọi trình duyệt | Chỉ dùng cho hệ điều hành, không dùng cho web |
| woff | ~140KB | gzip | 99% | Fallback legacy — không cần thiết từ 2026 |
| woff2 | ~95KB | Brotli | 96%+ | Mặc định cho mọi trang web |
| woff2 variable | ~180KB (nhiều weight) | Brotli | 95%+ | Trang dùng 4+ weight trong cùng font |
Subset font — kỹ thuật giảm kích thước thật sự
Font đầy đủ Latin + Cyrillic + Greek + tiếng Việt chứa khoảng 5.000 ký tự. Trang web Việt chỉ cần subset Latin + tiếng Việt, khoảng 500 ký tự.
Subset đúng giảm 60–80% kích thước file — tác động lớn hơn cả việc đổi định dạng. Đây là bước quan trọng nhất khi tự host Google Font.
Công cụ tạo subset tiếng Việt
- Google Webfonts Helper: Tải font và chọn “vietnamese” + “latin” — tự sinh file woff2 subset.
- fonttools CLI:
pyftsubset font.ttf --unicodes="U+0020-007E,U+0102-1EF9" --flavor=woff2 - Glyphhanger: Quét ký tự thật sự dùng trên trang, sinh subset chính xác hơn.
- Plugin OMGF: Tự động subset tiếng Việt cho Google Fonts trên WordPress.
Khai báo nhiều subset trong CSS
/* Tách subset qua unicode-range */
@font-face {
font-family: 'Inter';
src: url('inter-latin.woff2') format('woff2');
unicode-range: U+0020-007E; /* Latin cơ bản */
}
@font-face {
font-family: 'Inter';
src: url('inter-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9;
}
/* Trình duyệt tự tải file phù hợp với nội dung trang */Variable font — một file nhiều weight
Variable font lưu toàn bộ dải weight trong một file, trình duyệt tự nội suy giữa các giá trị. Thay vì 5 file riêng (300, 400, 500, 600, 700), trang dùng 1 file variable woff2.
Kết quả là ít HTTP request hơn và tổng kích thước thường nhỏ hơn khi dùng từ 4 weight trở lên.
Khai báo variable font
@font-face {
font-family: 'Inter';
src: url('inter-variable.woff2') format('woff2-variations'),
url('inter-variable.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
}
/* Dùng bất kỳ weight nào trong dải */
h1 { font-weight: 850; }
p { font-weight: 425; }Hỗ trợ và giới hạn variable font
- Chrome 62+, Firefox 62+, Safari 11+, Edge 79+ — hỗ trợ 95%+ trình duyệt đang dùng.
- Inter, Roboto Flex, Source Sans 3 đều có phiên bản variable trên Google Fonts.
- File variable lớn hơn một file static đơn (180KB vs 95KB cho 1 weight). Chỉ có lợi khi dùng từ 4 weight trở lên.
- Fallback: dùng 2 file static (400 + 700) cho trình duyệt cũ không hỗ trợ.
Kết hợp preload để tăng tốc font đầu trang
Trình duyệt phát hiện font muộn — sau khi parse CSS xong mới biết cần tải. Preload font woff2 trong <head> giúp trình duyệt tải song song ngay từ đầu.
Markup preload chuẩn
<link rel="preload"
href="/fonts/inter-vietnamese.woff2"
as="font"
type="font/woff2"
crossorigin>Lưu ý khi preload
- Preload tối đa 1–2 font file quan trọng nhất — thường là font body và heading chính.
- Bắt buộc có
crossorigincho font, dù font cùng domain. Thiếu thuộc tính này trình duyệt tải lại lần 2. - Kết hợp với font-display swap để tránh văn bản ẩn trong khi chờ font.
- Đọc thêm chiến lược preload và prefetch resource hint cho toàn trang.
Lựa chọn định dạng theo từng trường hợp
| Trường hợp | Định dạng | Subset | Lý do |
|---|---|---|---|
| Trang dùng 2–3 weight | woff2 static | Latin + tiếng Việt | Đơn giản, hiệu quả |
| Trang dùng 5+ weight | woff2 variable | Latin + tiếng Việt | Giảm số file và tổng kích thước |
| Trang đa ngôn ngữ (5+ ngôn ngữ) | woff2 + unicode-range | Theo từng ngôn ngữ | Trình duyệt chỉ tải subset cần |
| Trang dùng icon font | woff2 subset glyph | Chỉ icon đang dùng | Loại icon thừa, giảm đáng kể kích thước |
Checklist triển khai woff2 cho shop WordPress VN
- Chuyển toàn bộ font sang woff2 — loại bỏ ttf/otf/eot khỏi khai báo
@font-face. - Tạo subset Latin + tiếng Việt qua Google Webfonts Helper hoặc fonttools.
- Khai báo
unicode-rangeriêng cho từng subset trong CSS. - Thêm
font-display: swaptrong mọi khai báo@font-face. - Preload tối đa 2 font file quan trọng nhất với
crossorigin. - Tự host font thay vì dùng Google Fonts CDN để kiểm soát cache.
- Cấu hình cache header
Cache-Control: max-age=31536000, immutablecho file woff2. - Kiểm tra MIME type trả về là
font/woff2qua DevTools Network. - Dùng variable font nếu theme dùng từ 4 weight trở lên.
- Đo lại LCP sau khi triển khai qua Google PageSpeed Insights.
Bài liên quan
- Tự host Google Font — 5 bước tránh chặn render
- font-display swap — tránh văn bản ẩn khi tải font
- Tối ưu LCP — đo và fix từng bước
- Preload và prefetch — resource hint cho trang nhanh
Câu hỏi thường gặp
Có cần giữ woff làm fallback cho IE không?
Không cần từ 2026. IE ngừng hỗ trợ từ tháng 6/2022.
Trình duyệt không hỗ trợ woff2 còn lại chiếm dưới 0,5% toàn cầu.
Giữ woff tăng kích thước và độ phức tạp mà không mang lại lợi ích thực tế.
Variable font có nhược điểm gì không?
Có 2 điểm cần cân nhắc.
- File lớn hơn static đơn: Variable woff2 khoảng 180KB, trong khi 1 file static weight 400 chỉ khoảng 95KB. Có lợi khi dùng từ 4 weight trở lên.
- Công cụ chỉnh sửa cũ: Một số trình chỉnh sửa font cũ không đọc được variable font. Ảnh hưởng khi cần chỉnh sửa file nguồn, không ảnh hưởng web.
Cloudflare có phục vụ đúng MIME type cho woff2 không?
Có nếu cấu hình đúng. Cloudflare mặc định trả về font/woff2 — kiểm tra DevTools Network, cột “Type” phải hiện font.
Nếu sai MIME type, trình duyệt có thể từ chối tải font.
Subset tiếng Việt có bị mất ký tự nào không?
Subset tiếng Việt chuẩn bao gồm đầy đủ 134 ký tự có dấu (ă, â, ê, ô, ơ, ư và các thanh điệu). Ký tự Latin mở rộng dùng trong tên nước ngoài cần subset thêm dải U+0180–024F hoặc dùng font hệ thống làm fallback.
Tự host font có vi phạm bản quyền Google Fonts không?
Không. Mọi font trên Google Fonts dùng giấy phép mở (SIL OFL hoặc Apache 2.0), cho phép tải về và tự host thương mại.
Đọc kỹ giấy phép từng font trên trang Google Fonts trước khi triển khai.
Web22 hỗ trợ kiểm tra và tối ưu font toàn trang — từ woff2 đến subset tiếng Việt và preload đúng chuẩn. Xem dịch vụ tối ưu Core Web Vitals để tư vấn cụ thể cho shop.
