Khi trình duyệt gặp thẻ nhúng Google Fonts mặc định, nó phải nối tới fonts.googleapis.com để lấy CSS, đọc CSS đó rồi mới biết file font nằm ở fonts.gstatic.com để tải về. Hai chặng kết nối ngoài này nằm trên đường găng của việc hiển thị chữ, và bạn không kiểm soát được chúng. Lưu font ngay trên máy chủ của mình gỡ bỏ đúng nút thắt đó.
Vì sao self-host font lại nhanh hơn
Có ba lý do kỹ thuật rõ ràng, không phải cảm tính:
- Bớt một vòng kết nối ngoài. Với cách nhúng cũ, trình duyệt phải làm DNS lookup (tra cứu địa chỉ), bắt tay TLS rồi tải CSS từ một tên miền lạ trước khi chạm tới file font. Self-host gộp font vào cùng tên miền với trang, kết nối đã sẵn nên font tải gần như tức thì.
- Bộ nhớ đệm trình duyệt không còn dùng chung. Trước đây người ta tin rằng font Google đã được cache sẵn ở các site khác nên tải lại sẽ nhanh. Điều đó không còn đúng: Chrome, Firefox và Safari đều đã phân vùng cache theo từng tên miền gốc (cache partitioning) vì lý do riêng tư. Mỗi website giờ tự tải font của mình từ đầu, nên lợi thế “CDN dùng chung” của Google Fonts gần như biến mất.
- Bạn được dùng
preload. Khi font nằm trên server của mình, bạn biết chính xác đường dẫn file ngay từ HTML và có thể ra lệnh trình duyệt tải sớm. Với font nhúng ngoài, đường dẫn file thật chỉ lộ ra sau khi CSS của Google tải xong nên bạn không preload được.
Các phép đo độc lập cho thấy chênh lệch thường rơi vào khoảng vài trăm mili-giây, và rõ rệt hơn trên mạng di động yếu nơi chi phí thiết lập kết nối chiếm tỉ trọng lớn. Font là tài nguyên thường chặn hiển thị chữ, nên cải thiện ở đây tác động trực tiếp tới LCP (Largest Contentful Paint — thời điểm phần tử lớn nhất hiện ra) khi phần tử lớn nhất của trang là một khối văn bản.
Lợi ích về riêng tư và GDPR
Mỗi lần trình duyệt gọi sang fonts.gstatic.com, địa chỉ IP của người dùng được gửi sang máy chủ của Google. Năm 2022, một toà án ở Đức đã phán rằng nhúng Google Fonts trực tiếp mà không có sự đồng ý vi phạm GDPR (quy định bảo vệ dữ liệu của EU), chính vì việc truyền IP này. Self-host font cắt đứt yêu cầu mạng đó: không còn kết nối tới máy chủ bên thứ ba, không còn IP bị gửi đi. Đây là lý do nhiều site hướng tới thị trường châu Âu chọn lưu font tại chỗ cho gọn về mặt pháp lý.
Các bước self-host Google Font
Quy trình gọn, thường làm xong trong một buổi. Bốn bước chính:
- Tải đúng file woff2. Chỉ cần định dạng
woff2— nó nén gọn nhất và được mọi trình duyệt hiện đại hỗ trợ, không cần kèmwoffhayttfnữa. Bạn có thể lấy file gốc từ khogoogle-webfonts-helperhoặc tải bộ font rồi tự chuyển. Chỉ tải đúng những độ đậm (weight) và kiểu nghiêng (style) trang thật sự dùng — mỗi file thừa là một lần tải lãng phí. - Đặt file vào một đường dẫn ổn định trên server, ví dụ
/assets/fonts/, rồi bật nén và cache dài hạn cho thư mục này. - Khai
@font-facetrong CSS, trỏ tới file vừa đặt và đặtfont-displayhợp lý. - Preload file font quan trọng nhất (thường là weight dùng cho chữ thân bài hoặc tiêu đề LCP) ngay trong
<head>.
Khai @font-face
@font-face{
font-family: 'Inter';
src: url('/assets/fonts/inter-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}Đặt font-display: swap để trình duyệt hiện ngay chữ bằng font dự phòng rồi tráo sang font thật khi tải xong, tránh cảnh chữ vô hình (FOIT). Chi tiết về các giá trị khác và cách chống giật khi tráo font, xem bài font-display swap chống chữ vô hình.
Preload file font
<link rel="preload" href="/assets/fonts/inter-regular.woff2"
as="font" type="font/woff2" crossorigin>Lưu ý hai điểm dễ sai: bắt buộc có thuộc tính crossorigin ngay cả khi font nằm cùng tên miền (font luôn được tải ở chế độ ẩn danh), và chỉ preload font chắc chắn dùng ở màn hình đầu — preload quá tay sẽ giành băng thông với chính nội dung quan trọng khác.
So sánh nhanh hai cách nhúng
| Tiêu chí | Nhúng từ fonts.googleapis.com | Self-host |
|---|---|---|
| Kết nối ngoài | 2 tên miền (CSS + file font) | 0 (cùng tên miền) |
| Preload file font | Không (đường dẫn lộ muộn) | Có |
| Kiểm soát cache | Theo Google quy định | Toàn quyền |
| Gửi IP người dùng ra ngoài | Có | Không |
| Cập nhật phiên bản font | Tự động | Bạn tự cập nhật |
Đánh đổi duy nhất đáng kể: bạn phải tự cập nhật khi muốn đổi font. Với hầu hết site, font hiếm khi đổi nên đây không phải vấn đề lớn.
Góc thực chiến từ web22.dev
Site web22.dev chạy thật trên LiteSpeed kèm Cloudflare làm CDN, và toàn bộ Google Font được lưu ngay trên máy chủ thay vì nhúng ngoài. Mỗi file font đều khai font-display: swap và file weight chính được preload trong <head>. Cách này vừa cắt được vòng kết nối tới máy chủ Google, vừa để CDN của chính site phục vụ font với cache dài. Sau khi self-host, bước tiếp theo nên làm là nén và subset file để file woff2 nhẹ nhất có thể — xem bài tối ưu file woff2 và subset font.
Câu hỏi thường gặp
Self-host font có chắc làm tăng điểm PageSpeed không?
Nó loại bỏ kết nối ngoài và cho phép preload, nên thường cải thiện thời gian hiện chữ. Mức tăng điểm cụ thể tuỳ trang, nhưng đây là một trong những đòn bẩy ít rủi ro nhất cho font.
Có cần giữ thêm định dạng woff hay ttf không?
Không. Mọi trình duyệt hiện đại đều đọc woff2. Giữ thêm định dạng cũ chỉ làm CSS rối và tăng dung lượng tải.
Self-host có vi phạm giấy phép Google Fonts không?
Không. Font trên Google Fonts dùng giấy phép mở (thường là SIL Open Font License), cho phép bạn tải về và phục vụ trên máy chủ của mình.
Nếu bạn muốn rà soát toàn bộ khâu font, ảnh và cache của một website, dịch vụ tối ưu tốc độ website của Web22 có thể giúp gỡ từng nút thắt một cách có hệ thống.