Webfont là gì và vì sao nên dùng?

Webfont hoạt động như thế nào

Khi có người mở trang của bạn, trình duyệt đọc CSS, xác định font nào cần dùng rồi tải tệp đó từ máy chủ. Sau đó, trình duyệt vẽ chữ bằng font này. Toàn bộ quá trình diễn ra tự động, và người truy cập không cần cài đặt gì.

Dùng webfont hay font hệ thống?

Font hệ thống đã có sẵn trên thiết bị của người truy cập, ví dụ Arial, Georgia hoặc San Francisco. Chúng không cần tải về nên là lựa chọn nhanh nhất. Nhược điểm là giao diện có thể khác nhau giữa các thiết bị, và rất ít font trong số đó phù hợp với thương hiệu của bạn.

• Chọn webfont khi thương hiệu, tiêu đề hoặc thiết kế của bạn phụ thuộc vào một kiểu chữ cụ thể.
• Chọn font hệ thống khi tốc độ là ưu tiên hàng đầu, chẳng hạn trong bảng điều khiển hoặc công cụ nội bộ.
• Kết hợp cả hai bằng cách dùng webfont cho tiêu đề và font hệ thống cho nội dung chính.

Webfont ảnh hưởng đến tốc độ ra sao?

Mỗi tệp font là thêm một lần tải, và chữ có thể xuất hiện chậm hoặc bị nhảy vị trí trong lúc tệp đang tải. Một webfont được chuẩn bị tốt sẽ giúp giảm thiểu chi phí này. Hãy dùng WOFF2, loại bỏ các ký tự không cần thiết và chỉ tải những độ đậm bạn thực sự sử dụng. Hướng dẫn của chúng tôi về cách làm webfont tải nhanh hơn đề cập chi tiết từng bước.

Tự lưu trữ hay dùng dịch vụ font?

Các dịch vụ như Google Fonts và Adobe Fonts lưu trữ tệp font thay cho bạn. Tự lưu trữ nghĩa là giữ các tệp đó trên máy chủ của riêng bạn. Cách này giúp bạn kiểm soát bộ nhớ đệm và tốc độ, đồng thời trình duyệt của người truy cập không phải kết nối với bên thứ ba. Yếu tố này có thể quan trọng về mặt quyền riêng tư: năm 2022, một tòa án Đức đã phán quyết chống lại một website tải Google Fonts từ máy chủ của Google mà không có sự đồng ý của người dùng.

Trước khi tự lưu trữ, hãy đọc giấy phép của font. Hướng dẫn về giấy phép webfont của chúng tôi sẽ giải thích những điều cần lưu ý.

Bắt đầu

Chọn một font mà bạn có quyền sử dụng và chạy qua Webfont Generator. Bạn sẽ nhận được các tệp sẵn sàng cho web và CSS. Hướng dẫn của chúng tôi cũng chỉ cách thêm chúng vào website của bạn.