Bạn thiết kế trang web với phông chữ đẹp trên Figma, nhưng khi người dùng thật vào xem, chữ hiển thị khác hẳn vì máy họ không có phông đó. Hoặc website hiển thị đúng phông, nhưng trang tải chậm hơn đáng kể vì cần tải file phông về từ máy chủ. Đây là hai vấn đề phổ biến nhất liên quan đến webfont. Bài này giải thích webfont là gì, cách nạp phông vào website đúng cách, tầm quan trọng của subset tiếng Việt và cái giá phải trả về tốc độ nếu không xử lý cẩn thận.
Webfont là gì
Webfont là phông chữ được tải từ máy chủ về trình duyệt của người dùng trong quá trình tải trang, thay vì dùng phông chữ có sẵn trong hệ điều hành của họ. Phông chữ có sẵn trong máy gọi là system font (phông hệ thống). Hệ điều hành Windows, macOS, iOS và Android đều đi kèm một bộ phông riêng, và các bộ này không giống nhau hoàn toàn.
Vấn đề nảy sinh ở khâu thiết kế: bạn muốn người dùng thấy đúng phông chữ bạn đã chọn, dù họ dùng hệ điều hành nào hay thiết bị nào. Webfont giải quyết điều đó bằng cách đóng gói file phông vào quy trình tải trang, đảm bảo mọi người đều thấy cùng một phông.
Webfont khác gì system font
Sự khác biệt cốt lõi là nguồn gốc của file phông và hệ quả về tốc độ cũng như tính nhất quán. Bảng dưới đây tóm tắt các khía cạnh quan trọng.
| Khía cạnh | System font | Webfont |
|---|---|---|
| Nguồn file phông | Ổ cứng của máy người dùng | Máy chủ tải về khi vào trang |
| Tốc độ hiển thị chữ | Ngay lập tức, không cần tải | Chậm hơn, phụ thuộc tốc độ mạng |
| Tính nhất quán giữa các máy | Khác nhau, máy không có phông dùng phông dự phòng | Nhất quán, mọi người dùng thấy cùng phông |
| Phông chữ có thể dùng | Giới hạn trong bộ phông của hệ điều hành | Gần như không giới hạn |
| Ảnh hưởng tốc độ tải trang | Không có | Có, thêm ít nhất một lượt request HTTP |
Không phải lúc nào cũng cần webfont. Nếu bạn dùng phông hệ thống phổ biến như Arial, Georgia hay các chuỗi phông kiểu system-ui, -apple-system, sans-serif, trang tải nhanh hơn và vẫn trông ổn. Trào lưu dùng “system font stack” (chuỗi phông hệ thống) đang được nhiều trang lớn áp dụng để cải thiện tốc độ, đặc biệt kể từ khi iOS và macOS mặc định dùng San Francisco, một phông đẹp và dễ đọc.
Webfont tải về trình duyệt như thế nào
Khi trình duyệt phân tích CSS của trang và gặp khai báo @font-face, nó ghi nhận thông tin về file phông. Chỉ khi trang thực sự có phần tử HTML dùng phông đó mới bắt đầu tải file về. Đây là chi tiết hay bị hiểu nhầm: trình duyệt không tải webfont khi tải CSS, mà đợi đến khi biết trên trang có chữ cần phông đó.
Có hai cách nạp webfont vào website phổ biến nhất. Cách thứ nhất là tự host, tức lưu file phông trên cùng máy chủ với website và khai báo bằng @font-face trong CSS:
@font-face{
font-family: 'Be Vietnam Pro';
src: url('/fonts/be-vietnam-pro-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}Cách thứ hai là dùng dịch vụ bên ngoài như Google Fonts: dán thẻ <link> vào phần <head> của HTML, trình duyệt sẽ tải phông từ máy chủ của Google. Tiện lợi nhưng đồng nghĩa với việc thêm một request đến máy chủ bên ngoài, phụ thuộc vào tốc độ máy chủ của bên thứ ba.
Định dạng file phông phổ biến nhất hiện nay là WOFF2 (Web Open Font Format phiên bản 2), nén tốt hơn WOFF cũ khoảng 30% nên file nhẹ hơn đáng kể, và tương thích với mọi trình duyệt phổ biến từ Chrome, Firefox, Safari, Edge đến các phiên bản di động. Bạn không cần khai báo thêm WOFF hay TTF/OTF nếu không cần hỗ trợ IE.
Subset tiếng Việt: phần không được bỏ qua khi chọn webfont
Tiếng Việt có hơn 150 ký tự đặc thù khi tính đủ tổ hợp thanh điệu và dấu mũ. Một phông chữ Latin cơ bản thường bao gồm khoảng 220 đến 400 ký tự. Nếu phông bạn chọn không có tập hợp ký tự tiếng Việt (gọi là subset), những ký tự có dấu như ắ, ộ, ữ, ề sẽ không được vẽ đúng và trình duyệt dùng phông dự phòng để hiển thị, thường cho ra kết quả không nhất quán và phá vỡ giao diện đã thiết kế.
Khi dùng Google Fonts, hầu hết phông phổ biến đã có subset tiếng Việt. Khi chọn phông trên Google Fonts, tìm phần “Languages” trong giao diện để kiểm tra phông đó có hỗ trợ “Vietnamese” không trước khi đưa vào dùng. Trình duyệt sẽ tải chính xác phần ký tự cần, không tải toàn bộ phông.
Khi tự host file phông, cần kiểm tra file gốc có chứa ký tự tiếng Việt chưa. Nếu có, khai báo unicode-range trong @font-face để trình duyệt chỉ tải file phông khi cần ký tự trong vùng đó. Dải ký tự tiếng Việt chủ yếu nằm trong khoảng U+1EA0 đến U+1EF9 cùng với các ký tự có dấu mũ.
Một bẫy hay gặp: chọn phông trông đẹp trong giao diện thiết kế nhưng quên kiểm tra subset tiếng Việt. Đến khi website lên thật mới thấy phần chữ Việt hiển thị bằng phông khác hoàn toàn. Chọn phông và xác nhận subset nên là bước làm từ đầu, trước khi thiết kế, không phải sau khi thiết kế xong.
FOIT và FOUT: hai vấn đề tốc độ khi dùng webfont
Khi trình duyệt đang tải file phông về, nó phải quyết định hiển thị chữ như thế nào trong thời gian chờ. Có hai kiểu hành vi hay gặp, cả hai đều gây ra trải nghiệm không tốt theo cách riêng.
FOIT (Flash of Invisible Text, tức văn bản bị ẩn trong lúc chờ phông): trình duyệt ẩn toàn bộ chữ cho đến khi file phông tải xong. Người dùng thấy trang không có chữ, rồi chữ hiện ra đột ngột. Trên kết nối mạng chậm, trang có thể không có chữ trong vài giây. Đây là hành vi mặc định trước đây của một số trình duyệt.
FOUT (Flash of Unstyled Text, tức văn bản hiển thị bằng phông dự phòng rồi chuyển phông): trình duyệt hiển thị chữ bằng phông dự phòng ngay lập tức, rồi khi phông webfont tải xong thì chuyển sang. Người dùng thấy chữ nhảy kiểu một lần khi phông thay đổi. Khó chịu về mặt thị giác nhưng tốt hơn FOIT vì người dùng đọc được nội dung ngay.
Hai hành vi này ảnh hưởng trực tiếp đến điểm Core Web Vitals (các chỉ số trải nghiệm web cốt lõi), đặc biệt là LCP (Largest Contentful Paint, thời điểm phần tử lớn nhất trên trang hiển thị). Nếu phần tử lớn nhất là một đoạn chữ dùng webfont bị FOIT, điểm LCP bị tính muộn dù các phần khác của trang đã sẵn sàng.
Cách dùng webfont đúng để tốc độ ít bị ảnh hưởng
Có một số kỹ thuật thực tế giúp webfont không kéo tốc độ trang xuống quá nhiều. Đây là những gì người làm web thường áp dụng.
Dùng font-display: swap. Khai báo này trong @font-face cho trình duyệt biết dùng phông dự phòng ngay, đừng ẩn chữ trong khi chờ. Google khuyến nghị dùng swap hoặc optional. Nếu nhúng từ Google Fonts bằng thẻ <link>, Google Fonts đã tự thêm font-display: swap mặc định từ năm 2022.
Preload file phông quan trọng. Thêm thẻ preload vào <head> để trình duyệt biết tải file phông sớm hơn, song song với các tài nguyên khác thay vì đợi đến khi phân tích CSS xong:
<link rel="preload" href="/fonts/be-vietnam-pro.woff2" as="font" type="font/woff2" crossorigin>Chỉ tải trọng số phông thực sự dùng. Mỗi trọng số phông (regular 400, medium 500, bold 700…) là một file riêng. Nhiều website chỉ cần 2 trọng số, thường là regular và bold, không cần tải cả 9 trọng số của phông.
Tự host thay vì dùng Google Fonts nếu cần kiểm soát hoàn toàn. Tự host loại bỏ request đến máy chủ của bên thứ ba và cho phép cấu hình cache lâu hơn. Đổi lại, phải tự lo cập nhật file khi có phiên bản mới. Bạn có thể kiểm tra điểm tốc độ tổng thể của trang bằng công cụ trong bài viết về Lighthouse là gì để xem webfont đang ảnh hưởng đến hiệu năng ở mức nào.
Người không rành kỹ thuật cần quan tâm đến webfont ở mức nào
Nếu bạn đang nhờ người làm web, không cần tự biết cách tạo file WOFF2 hay viết khai báo @font-face. Nhưng có một việc bạn nên làm từ sớm: chọn phông chữ và kiểm tra nó có hỗ trợ tiếng Việt không trước khi bắt đầu thiết kế. Đây là bước người làm web và khách hàng cần thống nhất từ đầu.
Câu hỏi thực tế bạn có thể hỏi khi bàn với người làm web: “Phông chữ này có subset tiếng Việt đầy đủ không? Tốc độ tải trang có bị ảnh hưởng gì khi dùng phông này không?” Tương tự với favicon, bài viết về favicon là gì giải thích chi tiết về biểu tượng nhỏ hiển thị trên tab trình duyệt, cũng là một phần kỹ thuật trong bộ nhận diện visual của website.
Nếu dự án của bạn cần giao diện đẹp với phông chữ nhất quán, tốc độ tải trang nhanh và hiển thị đúng tiếng Việt trên mọi thiết bị, dịch vụ thiết kế website responsive của Web22 lo đầy đủ từ chọn phông, tối ưu tải phông đến kiểm tra hiển thị trên nhiều thiết bị.
Câu hỏi thường gặp về webfont
Dùng Google Fonts có ảnh hưởng đến tốc độ website không?
Có. Mỗi lần dùng Google Fonts, trình duyệt phải kết nối đến máy chủ của Google, thêm ít nhất một lượt tra tên miền và một request HTTP. Ảnh hưởng dao động tùy tốc độ mạng của người dùng và tốc độ máy chủ của Google ở khu vực đó. Để giảm thiểu, có thể tự host file phông thay vì nhúng từ Google Fonts, hoặc dùng kỹ thuật preconnect để trình duyệt kết nối sớm với máy chủ Google ngay từ đầu tải trang.
Tại sao chữ trên website không hiển thị đúng dấu tiếng Việt dù đã chọn phông đẹp?
Nguyên nhân phổ biến nhất là phông chữ đang dùng không có subset tiếng Việt, nên trình duyệt dùng phông dự phòng để hiển thị các ký tự thiếu. Kiểm tra bằng cách mở DevTools trong trình duyệt (phím F12), vào tab “Computed”, chọn phần tử có chữ bị lỗi và xem “font-family” thực tế đang được áp là gì. Nếu thấy phông khác với phông bạn khai báo, khả năng cao phông gốc thiếu ký tự tiếng Việt.
Có thể dùng nhiều phông khác nhau trong một trang không?
Được, nhưng mỗi phông thêm vào là thêm một file tải về, ảnh hưởng đến tốc độ. Hầu hết website cần tối đa 2 phông: một phông cho tiêu đề và một phông cho nội dung. Dùng quá nhiều phông cũng khiến giao diện không nhất quán. Nếu muốn thêm cá tính, thay vì thêm phông mới hãy thử thêm trọng số khác (bold, italic) của phông đang dùng.
WOFF2 và WOFF khác nhau như thế nào, dùng cái nào?
WOFF2 là định dạng mới hơn, nén tốt hơn WOFF khoảng 30%, hỗ trợ bởi tất cả trình duyệt hiện đại từ Chrome 36, Firefox 39, Safari 10, Edge 14 trở lên. Nếu không cần hỗ trợ IE, chỉ cần khai báo WOFF2 là đủ. WOFF và định dạng cũ hơn như TTF, OTF chỉ cần thiết nếu bạn vẫn cần hỗ trợ IE hoặc các trình duyệt rất cũ.