Trình tạo Webfont — TTF & OTF sang WOFF2 kèm CSS

Kiểm tra giấy phép font trước

Font là phần mềm, và giấy phép quyết định bạn được làm gì với chúng. Nhiều giấy phép thương mại chỉ cho dùng trên máy tính, hoặc tính phí riêng cho việc dùng trên web, và một số cấm chuyển đổi file. Điều này vẫn có thể áp dụng dù bạn đã mua font. Các giấy phép mở như SIL Open Font License thường cho phép dùng trên web, nhưng vẫn có điều kiện riêng. Hãy đọc giấy phép trước khi chuyển đổi. devpack không kiểm tra giấy phép, và bạn hoàn toàn chịu trách nhiệm về cách sử dụng font cũng như các file bạn tạo ra.

Nên dùng định dạng font nào?

WOFF2 là lựa chọn phù hợp cho hầu hết website. Nó nén tốt nhất và hoạt động trên mọi trình duyệt hiện đại. Chỉ thêm WOFF nếu bạn cần hỗ trợ trình duyệt rất cũ. TTF và OTF là định dạng dành cho máy tính và thường nặng hơn nhiều.

Font subsetting là gì?

Một font có thể chứa hàng nghìn ký tự mà website của bạn không bao giờ hiển thị. Subsetting loại bỏ chúng, giúp giảm đáng kể dung lượng file và tăng tốc trang. Khi bạn chọn bộ ký tự, CSS cũng được thêm unicode-range, nên trình duyệt chỉ tải font khi trang thực sự cần. Hãy giữ lại mọi ngôn ngữ website của bạn dùng, vì ký tự bị loại bỏ sẽ dùng font dự phòng.

Trong file ZIP có gì?

• Thư mục fonts chứa các file đã chuyển đổi.
• stylesheet.css với một quy tắc @font-face cho mỗi font, bao gồm độ đậm và kiểu chữ.
• demo.html, trang hiển thị từng font hoạt động.
• FONT-INFO.txt, chứa thông tin bản quyền và giấy phép mà mỗi font khai báo.

Tùy chọn nâng cao

• Variable font: thu hẹp một trục, xóa trục đó, hoặc tạo các độ đậm tĩnh như 400 và 700. CSS sẽ có dải độ đậm phù hợp.
• Tính năng OpenType: giữ bộ tiêu chuẩn, giữ tất cả, hoặc chỉ chọn đúng những tính năng bạn muốn.
• Vertical metrics: đồng bộ chiều cao dòng trên các nền tảng, hoặc tự đặt giá trị riêng.
• Fallback khớp kích thước: thêm một font hệ thống đã điều chỉnh kích thước để chữ ít xê dịch khi webfont tải xong, giúp cải thiện điểm layout shift.
• Mã: lấy quy tắc @font-face, đoạn mã sử dụng, thẻ preload hoặc cấu hình Tailwind CSS.

Giá trị font-display nào tốt nhất?

swap hiển thị chữ bằng font dự phòng ngay, rồi chuyển sang font của bạn khi tải xong. optional tránh được việc đổi font và layout shift, nhưng nếu kết nối chậm thì font của bạn có thể không bao giờ hiển thị. Để tăng tốc hơn nữa, hãy preload font chính bằng thẻ link rel="preload" và kiểm tra trang bằng Page Speed Test.

Dùng webfont trong Webflow

Tải các file WOFF2 và tải lên tại Site settings → Fonts → Custom fonts. Webflow sẽ tự tạo CSS cho bạn. Cần thêm mã tùy chỉnh trong dự án? Công cụ HTML & CSS to Webflow có thể giúp bạn.

Cũng được tìm dưới tên: tạo webfont, webfont generator, chuyển font sang woff2, ttf sang woff2, otf sang woff2, font-face css generator, cắt font subset, convert font sang webfont.

Các công cụ dùng kèm tốt với Trình tạo Webfont

• Font Subsetter — Làm font nhẹ hơn đáng kể bằng cách xóa những ký tự bạn không dùng.
• Nén ảnh — Giảm dung lượng ảnh và đồ họa đến 90% mà gần như không thấy mất chất lượng, tùy thuộc vào ảnh và cài đặt.
• Nén CSS — Dán stylesheet vào để thu nhỏ ngay lập tức.
• Mẫu nút CSS — Chọn một trong 24 nút CSS có hiệu ứng động: nền đổ màu, viền chạy, phát sáng, lấp lánh và nút 3D lún xuống.