Cách lưu trữ font cục bộ thay vì dùng Google Fonts

Vì sao nên tự lưu trữ Google Fonts?

Google Fonts đã giúp việc dùng typography đẹp trở nên dễ dàng. Thêm một stylesheet, chọn vài độ đậm, rồi đưa trang lên. Trong nhiều năm, đó là lựa chọn mặc định hợp lý cho các nhóm nhỏ.

Đánh đổi là trình duyệt của mỗi khách truy cập sẽ liên hệ với một dịch vụ bên thứ ba để tải CSS font và tệp font. Điều đó có hai hệ quả.

Thứ nhất, nó thêm một phụ thuộc bên ngoài vào quá trình render. Nếu CSS font chậm, bị chặn hoặc không khả dụng trong khu vực hay mạng của người dùng, trang của bạn sẽ phải chờ hoặc quay về font dự phòng.

Thứ hai, nó tạo ra một câu hỏi về quyền riêng tư. Một yêu cầu tải font có thể tiết lộ địa chỉ IP, user agent, ngữ cảnh referrer policy và thông tin thời gian của người dùng cho bên thứ ba. Google Fonts tuyên bố rằng dịch vụ này không đặt cookie thông qua Fonts API, nhưng “không có cookie” không đồng nghĩa với “không có dữ liệu cá nhân.” Theo GDPR, địa chỉ IP vẫn có thể là dữ liệu cá nhân tùy ngữ cảnh.

Tự lưu trữ font không tự động là yêu cầu bắt buộc cho mọi website, và đây không phải là tư vấn pháp lý. Nhưng với các trang ở châu Âu, trang khu vực công, y tế, giáo dục, tài chính, hoặc bất kỳ nhóm nào đang cố giảm các yêu cầu bên thứ ba không cần thiết, lưu trữ cục bộ thường là lựa chọn gọn gàng hơn.

Khi làm đúng, đây cũng thường là một cải thiện về hiệu năng. Điểm mấu chốt là “làm đúng.” Sao chép sáu tệp font vào /assets/fonts/ và tải tất cả trên mọi trang có thể còn tệ hơn dùng dịch vụ được lưu trữ sẵn. Nếu bạn muốn bối cảnh hiệu năng rộng hơn, bài trước của chúng tôi về lý do web font vẫn là cải thiện hiệu năng dễ nhất trên hầu hết website đã trình bày các kiểu lãng phí phổ biến.

Điều gì thay đổi khi bạn tự lưu trữ

Khi bạn dùng Google Fonts theo cách thông thường, trang của bạn làm việc này:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

Trình duyệt trước tiên yêu cầu CSS từ fonts.googleapis.com, rồi tải các tệp font từ fonts.gstatic.com.

Khi bạn tự lưu trữ, trang của bạn nên yêu cầu cả CSS lẫn tệp font từ chính tên miền của bạn:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Điều đó loại bỏ yêu cầu font đến bên thứ ba. Nó cũng khiến bạn chịu trách nhiệm chọn định dạng tệp, cache header, font dự phòng và cập nhật.

Trách nhiệm đó đáng được xem xét nghiêm túc. Font nằm trên critical rendering path. Một thiết lập font kém có thể gây chữ vô hình, dịch chuyển bố cục và render lần đầu chậm.

Bước 1: Kiểm kê những gì bạn thực sự dùng

Trước khi tải bất cứ thứ gì, hãy liệt kê các font family, độ đậm, kiểu chữ và bộ ký tự mà website của bạn thực sự cần.

Một website marketing điển hình có thể cần:

• Regular 400 cho văn bản thân bài
• Semibold 600 hoặc bold 700 cho tiêu đề và nút
• Italic 400 chỉ khi thiết kế thực sự dùng chữ nghiêng
• Chỉ bộ ký tự Latin, trừ khi website hỗ trợ thêm ngôn ngữ

Hãy thận trọng với các mặc định cũ của design system. Nhiều website tải 300, 400, 500, 600, 700, chữ nghiêng và nhiều hệ chữ chỉ vì ai đó đã chọn chúng một lần trong công cụ chọn font.

Trong DevTools của trình duyệt, mở bảng Network, lọc theo “font,” tải lại trang và kiểm tra những tệp nào được yêu cầu. Sau đó xem CSS của bạn để tìm cách dùng font-weight. Nếu CSS của bạn không bao giờ dùng 300, đừng host 300.

Nếu sau này bạn đánh giá tác động, Lighthouse có thể hữu ích, nhưng đừng coi điểm số của nó là toàn bộ câu chuyện. Hãy dùng nó như công cụ chẩn đoán, không phải một vị quan tòa. Chúng tôi có một hướng dẫn riêng về cách đọc báo cáo Lighthouse mà không hoảng sợ, hữu ích khi ưu tiên sửa các vấn đề về font.

Bước 2: Tải đúng tệp font

Google Fonts cung cấp các font mã nguồn mở. Bạn có thể tải chúng từ website Google Fonts hoặc từ repository của dự án font liên quan. Hãy kiểm tra giấy phép, nhưng phần lớn Google Fonts được phân phối theo các giấy phép mở như SIL Open Font License hoặc Apache License.

Với web, hãy ưu tiên WOFF2. Định dạng này được các trình duyệt hiện đại hỗ trợ rộng rãi và thường nhỏ hơn nhiều so với TTF hoặc OTF. Vào năm 2026, phục vụ trực tiếp TTF cho trình duyệt hiếm khi là điều hợp lý đối với website công khai.

Một cấu trúc thư mục hợp lý trông như sau:

/public
  /fonts
    inter-latin-400.woff2
    inter-latin-600.woff2
    inter-latin-700.woff2

Dùng tên tệp có tính mô tả. Sáu tháng sau, font.woff2 sẽ rất phiền. inter-latin-600.woff2 thì nhàm chán nhưng hữu ích.

Nếu website của bạn dùng hệ thống build, hãy giữ font nguồn ở một nơi rõ ràng và để build pipeline sao chép các tệp đã tối ưu vào thư mục public assets.

Bước 3: Tạo subset font khi phù hợp

Subsetting nghĩa là loại bỏ những ký tự bạn không cần. Một font đầy đủ có thể bao gồm Latin, Cyrillic, Greek, Vietnamese, ký hiệu và nhiều tính năng OpenType. Nếu landing page chỉ dùng tiếng Anh của bạn chỉ cần ký tự Latin, subset có thể nhỏ hơn đáng kể.

Có hai cách tiếp cận phổ biến:

1. Dùng subset dựng sẵn từ nhà cung cấp font hoặc repository.
2. Tự tạo subset bằng công cụ font như pyftsubset từ fonttools.

Với nhiều nhóm, subset Latin dựng sẵn là đủ. Subsetting tùy chỉnh hữu ích khi bạn có các trang rất giới hạn, chẳng hạn một trang chiến dịch đơn lẻ với lượng văn bản hạn chế, hoặc giao diện sản phẩm có phạm vi ký tự dự đoán được.

Hãy cẩn thận với website đa ngôn ngữ. Thiếu glyph sẽ gây trộn font dự phòng, có thể trông hỏng và làm giảm khả năng đọc. Nếu bạn hỗ trợ nhiều ngôn ngữ, hãy ánh xạ subset font theo route ngôn ngữ thay vì ép một subset cực nhỏ dùng ở mọi nơi.

Bước 4: Viết các quy tắc @font-face

Một thiết lập cục bộ tối thiểu trông như sau:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Một vài chi tiết ở đây rất quan trọng.

Dùng font-display: swap cho hầu hết website nội dung. Nó yêu cầu trình duyệt hiển thị chữ bằng font dự phòng nhanh chóng, rồi hoán đổi sang web font khi font đến nơi. Điều đó tránh phiên bản tệ nhất của FOIT: hiện tượng chữ vô hình thoáng qua.

Đặt một fallback stack rõ ràng. Nếu font tùy chỉnh thất bại, người dùng vẫn nên nhận được văn bản dễ đọc. Font dự phòng không phải là phần nghĩ đến sau; chúng là một phần của thiết kế. Nếu bạn cần xem lại kích thước, độ dài dòng và lựa chọn thân chữ, hãy bắt đầu với hướng dẫn thực tế về chữ dễ đọc trên web hiện đại.

Khớp độ đậm cho đúng. Nếu CSS của bạn yêu cầu font-weight: 500 nhưng bạn chỉ định nghĩa 400 và 700, trình duyệt có thể tự tổng hợp một độ đậm trung gian. Điều đó không phải lúc nào cũng tệ, nhưng có thể trông thiếu nhất quán.

Bước 5: Xóa các lệnh gọi Google Fonts bên ngoài

Sau khi thêm CSS font cục bộ, hãy xóa các lệnh gọi từ xa cũ khỏi template của bạn.

Tìm các phần sau:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?..." rel="stylesheet">

Cũng hãy kiểm tra:

• Thiết lập theme trong các nền tảng CMS
• Bảng typography của page builder
• Widget bên thứ ba
• Tag manager
• Các CSS import cũ như @import url('https://fonts.googleapis.com/...')

Mục cuối rất phổ biến. CSS @import cho font thường tệ hơn về hiệu năng vì nó trì hoãn việc phát hiện tài nguyên. Nếu bạn tự lưu trữ, hãy định nghĩa font trực tiếp trong CSS chính hoặc trong một tệp CSS font được tải sớm.

Công việc về quyền riêng tư thường thất bại vì các nhóm sửa template hiển nhiên nhưng bỏ sót script, widget và embed cũ. Mẫu này cũng xuất hiện trong công việc về consent; hướng dẫn của chúng tôi về điều gì đã thay đổi với cookie trong năm 2026 là tài liệu đồng hành hữu ích nếu bạn đang giảm bề mặt bên thứ ba ở phạm vi rộng hơn.

Bước 6: Đặt cache header

Tệp font là tài sản tĩnh. Chúng nên được cache mạnh nếu tên tệp đã được version hóa hoặc content-hash.

Một header production tốt là:

Cache-Control: public, max-age=31536000, immutable

Chỉ dùng cache immutable dài hạn nếu URL thay đổi khi tệp thay đổi. Ví dụ:

inter-latin-400.a8f3c2.woff2

hoặc một đường dẫn có version:

/fonts/v2/inter-latin-400.woff2

Nếu bạn ghi đè /fonts/inter-latin-400.woff2 mà không đổi URL, một số người dùng có thể giữ tệp cũ trong thời gian dài. Điều đó ổn cho đến khi không còn ổn. Versioning tránh được vấn đề này.

Cũng hãy phục vụ font với MIME type chính xác:

Content-Type: font/woff2

Hầu hết nền tảng hosting hiện đại tự xử lý việc này, nhưng vẫn đáng để xác minh.

Bước 7: Chỉ cân nhắc preload font quan trọng

Preloading có thể giúp trình duyệt phát hiện một font quan trọng sớm hơn:

<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>

Hãy dùng điều này một cách tiết chế. Preload font chính cho phần chữ above-the-fold, không phải mọi độ đậm font. Preload quá mức sẽ cạnh tranh với CSS, hình ảnh và JavaScript.

Ngay cả với font cùng origin, hãy thêm crossorigin vào preload font. Quá trình tải font dùng CORS mode, và bỏ qua thuộc tính này có thể gây tải trùng trong một số thiết lập.

Nếu bạn không chắc, hãy kiểm thử. Đừng bắt chước preload chỉ vì một checklist nói vậy.

Bước 8: Kiểm thử quyền riêng tư và hiệu năng

Việc kiểm thử khá đơn giản.

Mở DevTools, tải lại trang khi cache đã tắt, và lọc bảng Network theo:

• fonts.googleapis.com
• fonts.gstatic.com
• .woff2
• font

Bạn nên thấy các tệp font được phục vụ từ chính tên miền của mình và không có yêu cầu Google Fonts nào.

Sau đó kiểm thử với cold cache và warm cache. Ở lần truy cập đầu, font nên được tải xuống một lần. Ở các lần sau, chúng nên đến từ memory cache hoặc disk cache tùy trình duyệt.

Kiểm tra hiện tượng dịch chuyển bố cục khi font được hoán đổi vào. Nếu tiêu đề bị nhảy, metric của font dự phòng khác quá nhiều so với web font. Bạn có thể giảm độ dịch chuyển nhìn thấy được bằng cách chọn font dự phòng gần hơn hoặc dùng các override metric font mới hơn trong CSS như size-adjust, ascent-override, descent-override và line-gap-override. Những kỹ thuật này nâng cao hơn, nhưng hữu ích cho các giao diện được trau chuốt.

Cuối cùng, hãy kiểm thử trang trong chế độ duyệt riêng tư hoặc khi bật content blocker. Một lợi ích của tự lưu trữ là các công cụ quyền riêng tư ít có khả năng vô tình chặn typography của bạn hơn.

Những lỗi phổ biến cần tránh

Hosting quá nhiều độ đậm

Đây là lỗi phổ biến nhất. Hai độ đậm thường là đủ. Ba thường là rất nhiều. Năm là dấu hiệu có mùi của design system, trừ khi bạn có lý do mạnh.

Quên chữ nghiêng

Nếu nội dung của bạn dùng nhấn mạnh thật sự, hãy tải một tệp italic thật. Chữ nghiêng tổng hợp có thể trông kém, đặc biệt trong nội dung biên tập dài.

Giữ lại liên kết Google CSS cũ

Điều này làm mất ý nghĩa của việc chuyển đổi. Sau khi migration, không yêu cầu font nào nên đi đến Google trừ khi một thành phần khác đang chèn nó.

Phục vụ font mà không cache dài hạn

Tự lưu trữ cho bạn quyền kiểm soát. Hãy dùng nó. Font là ứng viên lý tưởng cho thời hạn cache dài.

Bỏ qua công việc pháp lý và tài liệu

Nếu chính sách quyền riêng tư của bạn trước đây đã nhắc đến Google Fonts hoặc tải font bên thứ ba, hãy cập nhật sau khi migration. Nếu bạn duy trì một danh mục xử lý dữ liệu, cũng hãy cập nhật nó. Thay đổi kỹ thuật và hồ sơ tuân thủ nên khớp nhau.

<!-- tool-cta:start -->

💡 Hãy thử cách này: Chuyển đổi các tệp TTF bạn đã tải xuống từ Google Fonts thành WOFF2 có thể tự lưu trữ kèm CSS bằng Webfont Generator.

<!-- tool-cta:end -->

Checklist migration đơn giản

1. Liệt kê font family, độ đậm, kiểu chữ và hệ chữ bạn thực sự dùng.
2. Tải tệp WOFF2 và xác nhận giấy phép.
3. Tạo subset font nếu website có nhu cầu ngôn ngữ hạn chế.
4. Thêm quy tắc @font-face cục bộ với font-display: swap.
5. Xóa tất cả tham chiếu Google Fonts link, preconnect và @import.
6. Phục vụ font từ chính tên miền của bạn với cache header dài hạn.
7. Chỉ preload font above-the-fold quan trọng nhất, nếu kiểm thử ủng hộ điều đó.
8. Xác minh trong DevTools rằng không còn yêu cầu Google Fonts nào.
9. Cập nhật tài liệu quyền riêng tư nếu cần.

Tự lưu trữ font không phải là công việc hào nhoáng. Đó là kiểu dọn dẹp hạ tầng nhỏ giúp giảm rủi ro phụ thuộc, cải thiện tư thế quyền riêng tư và cho bạn khả năng render dễ dự đoán hơn. Điều đó thường xứng đáng với một hoặc hai giờ bỏ ra.