Giảm khối lượng font mà mỗi route yêu cầu trình duyệt thực hiện
Kiểm kê các yêu cầu font khi cold-cache trên trang chủ, trang chuyển đổi, các view đã đăng nhập và các mẫu dùng hệ thống thiết kế khác nhau. Ghi lại họ font, trọng lượng, kiểu, file, nguồn, dung lượng truyền và selector. Một quy tắc @font-face khai báo không tự động kích hoạt tải xuống; trình duyệt thường tải một face khi bố cục hiện tại sử dụng nó. Điều đó khiến các trọng lượng và kiểu toàn cục không dùng đến trở thành ứng viên đầu tiên để loại bỏ.
Dùng kiểu tùy chỉnh khi nó mang giá trị thương hiệu thực sự, thường cho các heading hiển thị, và cân nhắc stack hệ thống cho đoạn văn bình thường khi thiết kế cho phép. Đừng cho rằng font biến (variable font) luôn nhỏ hơn: nó có thể thay thế nhiều file tĩnh nhưng có thể lớn hơn một face tĩnh duy nhất. So sánh tài sản đã nén thực sự được route yêu cầu.
Loại bỏ các họ, trọng lượng, italic và icon font không có route-level đã kiểm tra.
Kiểm tra rằng giấy phép cho phép phân phối web, subsetting và self-hosting trước khi thay đổi build.
Dùng WOFF2 và tạo subset nhưng không loại bỏ ký tự cần thiết
Bắt đầu với WOFF2 làm chuẩn cho trình duyệt hiện đại. W3C Recommendation mô tả WOFF2 là một gói web-font thiết kế để nén tốt hơn và giải nén nhanh, và nó được triển khai trên các trình duyệt lớn. Giữ định dạng khác chỉ khi có yêu cầu trình duyệt cũ đã được ghi nhận; bằng không, một fallback được thiết kế tốt là con đường tương thích an toàn hơn.
Subsetting tạo một file nhỏ hơn chứa các glyph hoặc hình dáng ký tự được chọn. unicode-range có thể liên kết các subset với dải ký tự để trình duyệt chọn file phù hợp khi khớp văn bản. Xây subset từ các trang thực tế và các ngôn ngữ bạn hỗ trợ, bao gồm dấu câu, tiền tệ, tên, văn bản pháp lý và các script do người dùng nhập. Thiếu glyph là vấn đề đúng/sai, không phải tiết kiệm byte chấp nhận được.
Kiểm tra các trang bản địa hóa đại diện và input trong form, không chỉ mẫu thiết kế bằng tiếng Anh.
Đảm bảo unicode-range và phạm vi weight/style của mỗi subset khớp với file triển khai.
Thiết kế fallback và chính sách font-display cùng nhau
Fallback là font người dùng nhìn thấy khi face tùy chỉnh chưa sẵn sàng. Chọn nó có tỷ lệ gần tương tự, rồi so sánh với các heading thực tế, nút nhiều dòng, navigation, bảng, form và chuỗi dài bản địa hóa. Chiều rộng khác nhau thay đổi cách xuống dòng; ascent, descent hoặc line-gap khác thay đổi cao khối. Cả hai đều có thể làm di chuyển nội dung đã hiển thị trên trang.
font-display định nghĩa hành vi render khi một face chưa có. optional có khoảng block cực ngắn và không có swap period, nên phù hợp cho body text khi fallback ổn định được ưu tiên trong lần truy cập đầu. swap hiển thị fallback ngay lập tức và có thể sau đó áp dụng web font, nhưng chỉ dùng nơi việc thay thế muộn không gây reflow gây gián đoạn. Block hoặc fallback nên phục vụ một lý do thiết kế đã kiểm tra, không phải là mặc định toàn cục. CSS size-adjust có thể giúp tinh metric của fallback, nhưng hãy kiểm tra trực quan cho mỗi script và viewport được hỗ trợ.
Không để văn bản thanh toán, phục hồi, tài khoản, an toàn hoặc điều hướng phụ thuộc vào một font tùy chỉnh đến muộn.
Một chữ cái fallback có thể truyền sai nghĩa; SVG icon thường an toàn hơn cho biểu tượng giao diện.
Cải thiện khám phá, nhưng kiềm chế preload và đánh giá luồng dữ liệu
Một face khai báo chỉ trong stylesheet ngoài có thể được khám phá sau khi stylesheet đó tải và phân tích. Critical CSS dễ bảo trì có thể phơi bày khai báo cần thiết sớm hơn; đừng inline binary font, điều đó làm tài liệu lớn hơn. Với nguồn bên thứ ba, preconnect có thể thiết lập kết nối sớm hơn. Yêu cầu font là tài nguyên CORS, nên delivery và preload cross-origin cần xử lý crossorigin chính xác.
Preload là ưu tiên ép buộc, không phải công tắc tốc độ toàn diện. Nó có thể cạnh tranh với các công việc quan trọng khác và có thể tải một face route không cần; nó cũng bỏ qua lựa chọn unicode-range. Sửa vấn đề khám phá muộn trước, rồi chỉ preload tối đa một file đã được chứng minh là first-view dùng URL chính xác, as=font, và crossorigin. Google Fonts nói các yêu cầu API bao gồm địa chỉ IP của khách, URL yêu cầu, header HTTP và referer; nó cũng nói API không đặt hoặc ghi log cookie và không dùng thông tin thu thập để tạo hồ sơ hay quảng cáo nhắm mục tiêu. Self-hosting ngăn Google nhận dữ liệu cho các lần tải đó. Đánh giá delivery, thông báo quyền riêng tư, thẩm quyền pháp lý, hợp đồng và tư vấn chuyên môn khi cần.
So sánh trace cold-cache và xác nhận file preload được tiêu thụ trên route.
Cân nhắc thiết lập kết nối, khả năng cache và CDN, bảo trì tài sản, và luồng dữ liệu khách.
Version các tài sản font và giữ cấu hình CSS fallback đã kiểm tra.
Kiểm tra hành vi render và vận hành font như một phụ thuộc có khả năng phục hồi
Với cold cache, dùng công cụ network của trình duyệt để kiểm tra chuỗi CSS->font request, thời gian, nguồn, caching và lỗi. Lặp lại trên kết nối bị giới hạn, rồi throttle hoặc chặn font. Thành công là văn bản đọc được, controls dùng được, ký hiệu chính xác và bố cục mạch lạc trước khi face tùy chỉnh xuất hiện. Thử các layout desktop và hẹp thực tế, chuỗi dài, lỗi, văn bản đồng ý, giá cả và mọi script được hỗ trợ.
Trong Chromium, ghi lại một reload trong Performance panel và kiểm tra track Layout Shifts; DevTools có thể xác định phần tử di chuyển và minh họa dịch chuyển. Font loading là nguyên nhân quen thuộc, nhưng một phần tử di chuyển không nhất thiết là nguyên nhân gốc, vì thế phải đối chiếu trace với việc áp dụng font. Layout Instability API chỉ có trên Chromium, điều đó làm kiểm tra thị giác đa trình duyệt quan trọng. Bao gồm tài sản font, hành vi CORS, chính sách cache, fallbacks và rollback trong review phát hành. Chế độ xuống cấp mong muốn là văn bản đọc được, không phải nội dung trắng hoặc điều hướng hỏng.
Cache ấm có thể che giấu yêu cầu ban đầu và vấn đề render.
Lặp lại kiểm tra khi file, nội dung CMS, template, provider hoặc quy tắc CDN thay đổi.