Phông chữ web tiếng Việt: subset, font-display và cách tránh nhảy bố cục

Phông chữ là tài nguyên nhỏ nhưng nằm ngay trên đường hiển thị của hầu hết trang web. Trình duyệt chỉ biết cần phông nào sau khi đọc xong CSS, nên chữ có thể hiện muộn, hiện bằng phông khác rồi đổi, hoặc đẩy nội dung bên dưới nhảy xuống.

Với tiếng Việt còn thêm 1 bẫy: chữ có dấu nằm ở nhiều khối ký tự, và cách chia tệp mặc định có thể kéo thêm tệp nặng không cần thiết. Bài dựa trên web.dev, Chrome for Developers, MDN, Next.js, bản nháp CSS Fonts của W3C và Web Almanac 2025, đối chiếu đến ngày 23/10/2026.

Bài trả lời 4 câu hỏi: chữ Việt cần những khối ký tự nào, cắt tập con và tự lưu ra sao, chọn font-display nào, và giảm nhảy bố cục thế nào. Click Star đã có bài riêng về tối ưu ảnh, INP và Core Web Vitals, nên bài này chỉ nói về phông.

Điểm chính

• Theo web.dev, phông web gây 2 vấn đề: chữ hiện muộn (làm chậm FCP, đôi khi LCP) và nhảy bố cục khi phông dự phòng đổi sang phông chính có kích thước khác. CLS tốt khi không quá 0,1 ở phân vị 75.
• Chữ Việt cần ít nhất 2 khối ký tự. Click Star đếm 146 chữ cái gồm nguyên âm đủ dấu thanh và chữ đ (kể cả viết hoa) trên phông Inter: 44 chữ ở khối latin, 102 chữ ở khối vietnamese, trong đó 20 chữ nằm cả ở latin-ext.
• CSS của Google Fonts khai báo latin-ext sau vietnamese, và theo CSS Fonts khối khai báo sau được xét trước. Trong phép đo của Click Star, mọi đoạn có đ, ă, ơ hoặc ư đều kéo tệp latin-ext 85.068 byte dù tệp vietnamese đã đủ glyph.
• font-display quyết định chữ ẩn hay hiện bằng phông dự phòng khi phông chính chưa về. Swap hiện chữ ngay nhưng có thể nhảy; optional tránh nhảy nhưng có thể bỏ phông chính ở lần tải đầu.
• size-adjust giúp phông dự phòng chiếm chỗ gần giống phông chính. Trong phép đo của Click Star, số dòng của 3 đoạn mẫu lệch giữa Arial và Inter ở 5 trên 9 chiều rộng, còn phông dự phòng đã chỉnh khớp ở 8 trên 9.
• Preload chỉ nên dùng cho phông chính, cần crossorigin và bỏ qua unicode-range. Tự lưu không mặc nhiên nhanh hơn: web.dev thấy khác biệt không rõ ràng.

Phông web làm chậm chữ và gây nhảy bố cục như thế nào

Theo web.dev (bài "Best practices for fonts", cập nhật 4/10/2022), nếu phông chưa tải xong thì trình duyệt thường trì hoãn hiển thị chữ. Nhảy bố cục xảy ra khi phông chính và phông dự phòng chiếm chỗ khác nhau. CLS tốt khi không quá 0,1 ở phân vị 75 (web.dev, bài CLS, cập nhật 12/4/2023).

Cơ chế nằm ở thứ tự việc. Theo web.dev (bài "Optimize WebFont loading and rendering", cập nhật 16/8/2019, ví dụ mã đã cũ, cơ chế còn đúng), trình duyệt chỉ yêu cầu phông sau khi dựng xong cây hiển thị từ DOM và CSS, nên cuộc đua với lần vẽ đầu tạo ra "chữ trống".

Chữ Việt cần những khối ký tự nào

Tối thiểu là 2 khối: Latin cơ bản và khối chữ Việt. Tiếng Việt có 12 nguyên âm cơ sở (a, ă, â, e, ê, i, o, ô, ơ, u, ư, y), mỗi nguyên âm 6 dạng (không dấu và 5 dấu thanh), 2 kiểu chữ, cộng đ và Đ: tổng 146 chữ cái do Click Star đếm.

Theo MDN (cập nhật 20/4/2026), unicode-range cho trình duyệt biết tệp phông dùng cho ký tự nào. Trang không dùng ký tự nào trong khoảng thì không tải tệp; dùng ít nhất 1 ký tự thì tải cả tệp.

Click Star đọc CSS Google Fonts trả cho phông Inter ngày 23/10/2026 (User-Agent Chrome trên Windows): 7 khối, trong đó vietnamese đứng trước latin-ext và latin. Khối vietnamese gồm dấu thanh kết hợp và ký hiệu đồng ₫ (U+20AB).

Đối chiếu 146 chữ: 44 chữ chỉ thuộc khối latin (như à, á, â, ê, ô, ú, ý), 82 chữ chỉ thuộc vietnamese, và 20 chữ thuộc cả vietnamese lẫn latin-ext (ă, đ, ĩ, ũ, ơ, ư, ỳ, ỵ, ỷ, ỹ và bản viết hoa).

Khi các khoảng chồng nhau, bản nháp CSS Fonts Module Level 4 của W3C (ngày 22/10/2026) quy định luật @font-face khai báo sau cùng được xét đầu tiên cho mỗi ký tự. Google khai báo latin-ext sau vietnamese, nên 20 chữ chồng nhau đi vào latin-ext trước. Click Star chạy Chromium 147 (Playwright) với CSS đó:

• Các chữ đ, ă, ơ, ư, ĩ, Đ đứng riêng: mỗi chữ chỉ kéo tệp latin-ext.
• Chữ ế chỉ kéo tệp vietnamese, chữ à chỉ kéo tệp latin.
• Câu tiếng Việt đầy đủ kéo cả 3 tệp: vietnamese, latin và latin-ext.
• Sau khi đảo thứ tự cho vietnamese khai báo cuối: câu đầy đủ chỉ kéo vietnamese và latin.

Với trang ghi giá bằng ₫: ký hiệu này nằm trong cả vietnamese lẫn latin-ext (U+20A0 đến U+20AB). Trong cùng phép thử, chữ ₫ đứng riêng chỉ kéo latin-ext; sau khi đảo thứ tự thì chỉ kéo vietnamese.

Điều kiện đi kèm: tệp vietnamese phải chứa đủ glyph. Với Inter, tệp latin cộng vietnamese phủ đủ 146 chữ và ký hiệu ₫; phông khác cần kiểm lại bằng chính tệp của nó.

Cắt tập con, WOFF2 và chuyện tự lưu hay dùng dịch vụ

Chỉ dùng WOFF2. Web.dev (2022) cho biết WOFF2 nén tốt hơn WOFF khoảng 30% nhờ Brotli và được hỗ trợ ở mọi nơi.

Click Star đo kích thước tệp WOFF2 của Inter do Google trả ngày 23/10/2026. Phông biến thiên (độ đậm 100 đến 900): latin 48.256, vietnamese 10.252, latin-ext 85.068 byte, tổng 143.576 byte; bỏ latin-ext còn 58.508. Xin đúng độ đậm 400 thì Google trả bản tĩnh: 23.664, 4.972 và 35.000 byte, tổng 63.636 byte, còn 28.636 nếu bỏ latin-ext.

Khớp với web.dev: phông biến thiên thường nặng hơn tệp tĩnh đơn lẻ, chỉ có lợi khi cần nhiều độ đậm.

Về tự lưu, chưa nguồn nào cho kết luận chắc. Web.dev (2022) viết rằng trên giấy tự lưu bỏ được 1 kết nối bên thứ ba nhưng thực tế khác biệt không rõ ràng, và nên có CDN cùng HTTP/2. Web Almanac 2025 nhận xét việc tách bộ nhớ đệm theo trang đã làm mất một phần lợi thế cũ của CDN Google.

Nếu tự lưu, web.dev khuyên tự làm phần mà dịch vụ lớn làm hộ: WOFF2 và cắt tập con (công cụ nêu tên: subfont, glyphanger), đồng thời kiểm giấy phép có cho phép làm vậy không. Click Star không tư vấn pháp lý: hãy đọc giấy phép của từng tệp phông.

font-display: chọn giá trị nào

Theo MDN (cập nhật 10/9/2026), font-display chia vòng đời tải phông thành 3 giai đoạn: chặn (chữ vẽ bằng phông dự phòng vô hình), hoán đổi (dùng phông dự phòng nhìn thấy, phông chính về thì đổi) và thất bại (giữ phông dự phòng).

Bảng của web.dev (2022), khoảng chặn rồi khoảng hoán đổi: block 2 đến 3 giây rồi vô hạn; swap 0 ms rồi vô hạn; fallback 100 ms rồi 3 giây; optional 100 ms rồi không có; auto tùy trình duyệt. Web.dev nói khó đề xuất cách duy nhất; có thể kết hợp swap cho phần nhận diện và optional cho chữ nội dung.

Web Almanac 2025 ghi khoảng 50% trang dùng swap, khoảng 25% dùng block (khoảng 70% số đó từ phông biểu tượng) và khoảng 0,5% dùng optional.

Preload phông chính

Preload giúp trình duyệt tải phông sớm. Web.dev (2022) cảnh báo preload lấy băng thông của tài nguyên khác, và nhúng khai báo @font-face vào thẻ head có thể hiệu quả hơn. Preload bỏ qua unicode-range nên chỉ preload tệp chắc chắn cần.

Theo MDN (cập nhật 20/5/2026), preload phông bắt buộc có crossorigin, kể cả khi cùng nguồn gốc.

Phông dự phòng đã chỉnh số đo

Bài "Improved font fallbacks" của Chrome for Developers (cập nhật 10/2/2023) hướng dẫn tạo phông dự phòng từ phông có sẵn trên máy. size-adjust co giãn glyph; ascent-override, descent-override và line-gap-override chỉnh số đo dọc. Bài nêu Arial cho phông không chân, nhưng Arial không có trên Android.

Theo MDN (cập nhật 20/4/2026), size-adjust đã phổ biến từ tháng 9/2023, còn ascent-override ghi "limited availability", chưa phải Baseline.

Với tiếng Việt còn khoảng trống: bài Chrome tính độ rộng trung bình theo tần suất chữ cái tiếng Anh. Mã next/font/local trên GitHub ghi chú "TODO: Currently only works for the latin alphabet" và dùng chuỗi mẫu chữ không dấu. Click Star không tìm thấy nguồn kiểm chứng cách tính này cho chữ Việt.

Click Star tự đo ví dụ minh họa: 3 đoạn tiếng Việt dài 511 ký tự, chữ 16px, dòng cao 1,5, Chromium 147 trên macOS. Inter rộng hơn Arial 5,97% (size-adjust khoảng 106%).

Số dòng của 3 đoạn ở 9 chiều rộng khung (260 đến 414 px): Arial khác Inter ở 5 chiều rộng (260, 300, 340, 358, 390 px), mỗi lần lệch 1 dòng. Phông dự phòng đã chỉnh khớp Inter ở 8 trên 9 chiều rộng (lệch ở 300 px).

Lệch 1 dòng làm nội dung bên dưới xê dịch.

Với Next.js

Theo tài liệu Next.js (cập nhật 24/9/2026), next/font tải phông Google lúc build và tự lưu, không gửi yêu cầu tới Google từ trình duyệt. Tùy chọn subsets chỉ quyết định tập nào được preload; display mặc định là swap; adjustFontFallback mặc định bật cho phông Google.

Với tiếng Việt, hãy thêm "vietnamese" vào subsets. Mã nguồn next 16.2.4 mà Click Star đọc gom mọi tệp phông trong CSS Google, chỉ đánh dấu preload cho tập trong subsets.

Suy luận của Click Star, chưa kiểm trên bản build thật: nếu CSS tự lưu giữ thứ tự của Google, quy tắc thứ tự ở trên vẫn áp dụng. Hãy mở bảng Network sau khi build.

Cách đo

Dùng bảng Network của Chrome DevTools (web.dev dẫn tab Timing để xem phông có được yêu cầu đủ sớm), lọc theo Font để đếm tệp và byte của trang có chữ Việt thật. Chuẩn cuối là CLS thực địa ở phân vị 75, tách di động và máy tính.

Đánh giá của Click Star. Nhận định của Click Star về thứ tự ưu tiên: tải đúng tệp (đúng khối ký tự, WOFF2, ít tệp), rồi font-display và phông dự phòng, còn preload sau cùng vì dễ gây tác dụng phụ. Thứ tự khai báo khối ký tự thường quan trọng hơn chỉnh tinh số đo.

Công khai lợi ích: Click Star có dịch vụ thiết kế website chuẩn SEO tải nhanh, nên có lợi ích liên quan đến chủ đề này.

Lộ trình 7 ngày cho website có chữ Việt

Đây là khung tham khảo của Click Star, không lấy từ nguồn ngoài.

• Ngày 1: liệt kê phông, độ đậm và nguồn; ghi số tệp và tổng byte ở 3 trang tiêu biểu.
• Ngày 2: mở trang tiếng Việt thật, kiểm có tệp latin-ext hoặc độ đậm thừa không.
• Ngày 3: sửa tập tệp và thứ tự khai báo, chuyển WOFF2; chỉ tự lưu khi đã đọc giấy phép.
• Ngày 4: đặt font-display có chủ đích cho từng phông.
• Ngày 5: thêm phông dự phòng chỉnh số đo, thử trên Windows, macOS, Android.
• Ngày 6: preload phông chính kèm crossorigin, rồi kiểm Network.
• Ngày 7: bật theo dõi CLS thực địa và đặt mốc so sánh trước sau.

Điều chưa biết

Click Star không có số đo tỷ lệ website Việt Nam bị nhảy bố cục do phông. Các phép đo trong bài chỉ trên phông Inter, Chromium 147 và 1 mẫu chữ.

Click Star không tìm thấy nghiên cứu độc lập về độ chính xác của size-adjust với chữ Việt. Hành vi của Safari và Firefox với font-display, preload và các descriptor số đo chưa được kiểm ở bản hiện hành.

Trang FAQ của Google Fonts dùng khung JavaScript nên công cụ không đọc được; giấy phép và quyền riêng tư của dịch vụ chưa được đối chiếu. Chưa nguồn nào cho kết luận chắc về lợi ích của tự lưu, và Click Star chưa có phép đo riêng.

Những sai lầm thường gặp

1. Chỉ khai báo tập latin cho trang tiếng Việt, để phần chữ có dấu rơi về phông hệ thống.
2. Giữ nguyên thứ tự khối ký tự của dịch vụ mà không kiểm trang tiếng Việt thật tải tệp nào.
3. Tải phông biến thiên đủ độ đậm cho trang chỉ dùng 1 độ đậm.
4. Dùng font-display: block cho chữ nội dung, khiến chữ ẩn 2 đến 3 giây nếu phông về chậm.
5. Preload quá nhiều tệp hoặc quên crossorigin.
6. Đặt chiều cao dòng cố định để chữa nhảy bố cục thay vì chỉnh phông dự phòng.
7. Tự lưu phông khi chưa đọc giấy phép.