Tự host Google Font loại bỏ độ trễ DNS và kết nối phụ, đồng thời giải quyết rủi ro GDPR với người dùng EU. Bài hướng dẫn 5 bước tự host font 2026: tải xuống, tạo woff2, viết @font-face, preload font quan trọng, và tắt Google Fonts trong WordPress.
Vì sao tự host — 3 lý do thực tế
Tải font từ Google CDN tạo ra 3 vấn đề: độ trễ DNS, rủi ro GDPR, và phụ thuộc dịch vụ bên ngoài. Tự host giải quyết cả 3 — chỉ cần thiết lập một lần.
Lý do 1 — Giảm độ trễ tải font
Kết nối fonts.googleapis.com thêm DNS lookup, TCP handshake và TLS handshake mới — tổng cộng 150–300ms trên mạng mobile thông thường. Tự host dùng lại kết nối của máy chủ gốc, không thêm độ trễ.
Với người dùng di động 4G tại VN, 150–300ms là khoảng thời gian đáng kể — tác động trực tiếp đến FCP.
Lý do 2 — Tuân thủ GDPR
Google CDN ghi lại địa chỉ IP người dùng EU khi serve font — vi phạm GDPR theo quyết định toà án Đức năm 2022.
Site tự host loại bỏ hoàn toàn rủi ro này.
Ngay cả shop VN không có khách EU, việc không gửi data người dùng ra ngoài là thực hành tốt về bảo mật.
Lý do 3 — Loại bỏ phụ thuộc ngoài
Google CDN hiếm khi gián đoạn nhưng không phải không bao giờ. Site tự host không bị ảnh hưởng khi dịch vụ bên ngoài gặp sự cố.
Giảm số lượng domain bên thứ ba còn giúp đơn giản hoá CSP (Content Security Policy) nếu site có yêu cầu bảo mật cao.
Tác động đến FCP và Core Web Vitals
Font tải chậm trì hoãn FCP — trình duyệt chờ font trước khi render text. Tự host kết hợp preload giảm đáng kể thời gian này.
Xem thêm tại bài so sánh FCP và LCP.
Bước 1 — Tải font từ Google Fonts
Dùng công cụ “Google Webfonts Helper” để tạo gói tải xuống gồm woff2 và CSS @font-face đúng đường dẫn. Không cần chuyển đổi thủ công.
Quy trình tải qua Webfonts Helper
- Mở
gwfh.mranftl.com(Google Webfonts Helper). - Tìm font cần dùng (ví dụ: “Inter”).
- Chọn weight cần (400, 500, 600, 700 — đủ cho shop điển hình).
- Chọn subset: latin + vietnamese (cho shop VN).
- Chọn “Modern Browsers” → chỉ lấy woff2 (giảm kích thước đáng kể so với woff).
- Tải file zip → giải nén vào folder theme
/fonts/. - Copy CSS @font-face từ Helper, dán vào stylesheet của theme.
Chọn weight và subset đúng
Chỉ tải weight thực sự dùng trong CSS — mỗi weight thêm tốn 20–80 KB. Shop điển hình cần: 400 (body), 700 (heading, button); thêm 500/600 nếu design yêu cầu.
Subset vietnamese cover hầu hết ký tự tiếng Việt; latin subset cho tiêu đề tiếng Anh và code. Không cần “all charset” trừ trường hợp đặc biệt.
Bước 2 — Viết @font-face đúng cú pháp
Khai báo @font-face cần đúng đường dẫn, đúng format, và có font-display để tránh chữ bị ẩn trong khi font đang tải. Công cụ Helper tạo đúng nhưng cần kiểm tra đường dẫn khớp với cấu trúc theme.
Markup chuẩn @font-face
/* style.css hoặc inline trong <head> */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/wp-content/themes/web22/fonts/inter-v12-vietnamese-400.woff2')
format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Inter';
font-weight: 700;
font-display: swap;
src: url('/wp-content/themes/web22/fonts/inter-v12-vietnamese-700.woff2')
format('woff2');
}4 quy tắc viết @font-face
- font-display: swap: render fallback ngay, swap khi font load — tránh chữ bị ẩn. Xem chi tiết tại bài font-display swap.
- unicode-range: chỉ tải khi trang có ký tự trong range đó. Tách subset Vietnamese giúp trình duyệt bỏ qua nếu trang chỉ tiếng Anh.
- Chỉ format woff2: bỏ ttf/eot/woff cũ — trình duyệt hiện đại 99% hỗ trợ woff2.
- Đường dẫn tuyệt đối: dùng
/wp-content/...thay vì../fonts/— tránh broken link khi WordPress rewrite URL.
Kiểm tra font đã load đúng chưa
Mở DevTools → tab Network → lọc “Font”. Reload trang và xác nhận: file woff2 load từ domain của site, không phải từ fonts.gstatic.com.
Tab Sources → click vào tên font → xem “font-display” và “unicode-range” trong CSS để xác nhận khai báo đúng.
Bước 3 — Preload font quan trọng
Trình duyệt chỉ phát hiện @font-face sau khi phân tích xong file CSS. Preload hint trong <head> cho phép tải font song song với CSS, giảm thời gian đợi font trước khi render.
Markup preload font
<!-- trong <head> -->
<link rel="preload"
href="/wp-content/themes/web22/fonts/inter-v12-vietnamese-400.woff2"
as="font"
type="font/woff2"
crossorigin>
<link rel="preload"
href="/wp-content/themes/web22/fonts/inter-v12-vietnamese-700.woff2"
as="font"
type="font/woff2"
crossorigin>4 lưu ý khi preload font
- Chỉ preload font quan trọng: weight 400 và 700 đủ cho hầu hết trang. Font weight 300/500/600 để tải sau.
- Attribute crossorigin bắt buộc: font CORS — thiếu attribute này trình duyệt fetch 2 lần, tốn gấp đôi.
- Đường dẫn tuyệt đối chính xác: sai đường dẫn gây 404, lãng phí preload slot.
- Không preload quá 4 font: cạnh tranh băng thông với CSS quan trọng, có thể làm chậm LCP.
Thêm preload trong WordPress
Thêm preload link trong theme functions.php qua hook wp_head. Hoặc dùng plugin “OMGF” — tự động thêm preload đúng font đang dùng.
Xác nhận preload hoạt động: DevTools → tab Network → ảnh mũi tên Initiator của file woff2 phải là “Preload scanner”, không phải “CSS parser”.
Tắt Google Fonts và xác nhận kết quả
Theme và plugin WordPress thường tự enqueue Google Fonts qua URL fonts.googleapis.com. Sau khi tự host, phải tắt để tránh tải 2 lần.
Tắt Google Fonts qua functions.php
// theme/functions.php
add_action('wp_enqueue_scripts', function() {
wp_dequeue_style('google-fonts');
wp_dequeue_style('astra-google-fonts');
wp_dequeue_style('elementor-google-fonts');
}, 100);
// Lọc toàn bộ URL googleapis.com
add_filter('style_loader_src', function($src) {
if (strpos($src, 'fonts.googleapis.com') !== false) {
return false;
}
return $src;
});Xác định plugin/theme nào đang load font
Dùng plugin “Query Monitor” → tab Enqueued Scripts/Styles → xem style nào có URL chứa googleapis.com. Tắt từng cái qua handle tương ứng.
Với theme premium có settings panel (Astra Pro, Flatsome, Avada): tìm option “Performance → Disable Google Fonts” trong theme options.
Plugin hỗ trợ tự host
- OMGF (Optimize My Google Fonts): tự động hoá toàn bộ quy trình tự host — tải font, tạo @font-face, tắt enqueue cũ, thêm preload.
- Disable Google Fonts: chỉ tắt enqueue, không tự host — dùng khi bạn quản lý font thủ công.
- Local Fonts (Elementor): dành riêng cho site dùng Elementor.
Xác nhận và đo hiệu quả
Sau khi thiết lập, kiểm tra 2 điều: không còn request đến googleapis.com (tuân thủ GDPR), và thời gian font sẵn sàng giảm xuống.
Xác nhận GDPR qua DevTools
- Mở Chrome DevTools → tab Network.
- Reload trang với xoá cache (Ctrl+Shift+R).
- Lọc theo “googleapis” hoặc “gstatic”.
- 0 request = đã tuân thủ.
- Vẫn có request = plugin hoặc theme vẫn load. Dùng plugin “Query Monitor” để tìm nguồn.
Đo cải thiện hiệu năng trước và sau
| Chỉ số | Google CDN | Tự host | Thay đổi |
|---|---|---|---|
| Số request font | 3–5 (CSS + woff2) | 1–2 (woff2) | Giảm đáng kể |
| Tổng dung lượng font | ~180 KB | ~120 KB (subset) | Nhỏ hơn 1/3 |
| Thời gian font sẵn sàng | ~450 ms | ~150 ms | Nhanh hơn 3x |
| FCP | ~1,6s | ~1,3s | Cải thiện rõ |
| Tuân thủ GDPR | Rủi ro | Đạt | — |
Sử dụng GTmetrix hoặc WebPageTest để đo
Chạy GTmetrix với location “Singapore” (gần VN nhất) trước và sau khi tự host. So sánh waterfall: request font phải load từ domain của site, không phải googleapis.com.
Xem thêm về TTFB và cách đo tại bài TTFB deep dive.
Bài liên quan
Tự host font 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.
- font-display swap — kiểm soát hành vi render font
- FCP vs LCP — phân biệt và tối ưu từng chỉ số
- Fix CLS — font swap gây dịch chuyển bố cục
- Core Web Vitals 2026 — tổng quan 3 chỉ số
- TTFB — giảm thời gian phản hồi máy chủ
Câu hỏi thường gặp
Tự host có mất update tự động từ Google Fonts không?
Có, nhưng không đáng lo ngại. Google Fonts cập nhật rất hiếm — thường 1–2 năm một lần.
Khi cần phiên bản mới, tải lại từ Helper và thay file woff2.
Update font không ảnh hưởng production nếu bạn không cần tính năng mới của font đó.
Theme premium load Google Fonts sâu — tắt thế nào?
Theme Astra Pro, Flatsome, Avada thường có cài đặt “Performance → Disable Google Fonts” trong panel riêng. Hoặc dùng filter style_loader_src như code ở bước 4.
Theme bản miễn phí khó tắt hơn — cần override trong functions.php của theme con hoặc dùng plugin OMGF.
Subset Vietnamese không đủ cho shop bán hàng không?
Subset Vietnamese cover 99,9% ký tự shop điển hình. Trường hợp hiếm gặp (tên thương hiệu có ký tự đặc biệt, hán tự) mới cần subset thêm.
Helper có option chọn subset tuỳ chỉnh. Hoặc tải “all charset” — tăng kích thước thêm 30–50%.
Variable font (1 file nhiều weight) tự host được không?
Được. Variable font như Inter Variable hay Roboto Flex chỉ cần 1 file thay vì 5 file weight riêng — giảm dung lượng đáng kể.
Helper hỗ trợ tải variable font trực tiếp.
Trình duyệt hỗ trợ ~95% toàn cầu năm 2026. Thêm font tĩnh làm dự phòng nếu cần phủ trình duyệt cũ.
Self-host có cần SSL/HTTPS không?
Có. Font file serve từ cùng domain — site đã HTTPS thì font tự động qua HTTPS, không cần cấu hình thêm.
Nếu font load từ subdomain khác, cần SSL hợp lệ và CORS header đúng để trình duyệt chấp nhận font.
Cần tối ưu font và cải thiện điểm Core Web Vitals cho site? Web22 cung cấp dịch vụ tối ưu toàn diện — bao gồm self-host font, preload và audit FCP/LCP.
