Chuyển font TTF, OTF sang WOFF2 cho website (kèm @font-face)
Mục lục
Cách chuyển font TTF, OTF sang WOFF2 bằng công cụ Chuyển đổi font của ColorME: chọn file, tải WOFF2, sao chép mã CSS @font-face và dùng trên trang web. Có số liệu thử thật với Be Vietnam Pro, Poppins, Lobster, Source Serif 4 (nhẹ hơn 56–75%) và phép kiểm tra dấu tiếng Việt sau khi chuyển.
Trả lời nhanh: để chuyển font TTF hoặc OTF sang WOFF2, mở công cụ Chuyển đổi font của ColorME, bấm Chọn font (hoặc thả nhiều file vào trang), để nguyên lựa chọn WOFF2 rồi bấm Tải. Ngay dưới danh sách, công cụ viết sẵn đoạn CSS @font-face cho từng font, bạn bấm Sao chép và dán vào file CSS. Mình thử với 4 font mã nguồn mở: file nhẹ đi 56–75%, dấu tiếng Việt giữ nguyên.
Video 38 giây: chọn Be Vietnam Pro, thêm Poppins, Lobster và Source Serif 4, sao chép @font-face, đổi qua WOFF và TTF / OTF, cuối cùng là một file không phải font để xem thông báo lỗi. Quay màn hình: ColorME.
WOFF2 là gì, vì sao website nên dùng thay cho TTF?
TTF và OTF là định dạng font để cài vào máy tính. WOFF2 chứa đúng dữ liệu font đó nhưng được nén mạnh hơn để tải qua mạng. File nhỏ hơn thì chữ hiện ra sớm hơn, nhất là trên điện thoại dùng 4G. Trang công cụ ghi ngay dưới kết quả: “WOFF2 nhẹ nhất cho website · WOFF cho trình duyệt cũ · TTF/OTF để cài vào máy và dùng trong phần mềm thiết kế”.
Chuyển định dạng không thêm được chữ còn thiếu, nên hãy xem trước font có đủ dấu hay không theo bài kiểm tra font có hỗ trợ tiếng Việt.
Bốn font mình dùng để thử
Cả bốn đều phát hành theo giấy phép SIL Open Font License 1.1 (OFL), cho phép dùng và nhúng lên web.
| Font | File gốc | Giấy phép | Nguồn |
|---|---|---|---|
| Be Vietnam Pro Regular | TTF | OFL 1.1 | Kho Google Fonts |
| Poppins Regular | TTF | OFL 1.1 | Kho Google Fonts |
| Lobster Regular | TTF | OFL 1.1 | Kho Google Fonts |
| Source Serif 4 Regular | OTF | OFL 1.1 | Kho adobe-fonts/source-serif |
Bước 1: mở công cụ và chọn file font
Vào colorme.vn/tools/font-converter. Trang chỉ có một khung với nút Chọn font, dòng “hoặc thả nhiều file font vào đây” và dòng “TTF, OTF, WOFF, WOFF2 · xử lý ngay trên máy bạn”. Về chi phí, phần hỏi đáp của trang trả lời câu “Chuyển font có miễn phí không?” là: “Có, miễn phí và không cần đăng nhập.” Mình làm toàn bộ bài này mà không đăng nhập.
Màn hình đầu: nút Chọn font và vùng thả file. Ảnh chụp màn hình: ColorME.
Bạn chọn được nhiều file một lượt. Mình chọn cùng lúc ba file, kết quả hiện ra chỉ sau vài giây.
Chọn ba file, kết quả hiện gần như ngay. Quay màn hình: ColorME.
Bước 2: đọc kết quả, file nhẹ đi bao nhiêu?
Mỗi font là một dòng: ô “Aa” vẽ bằng chính font đó, tên họ font và kiểu (ví dụ “Be Vietnam Pro · Regular”), rồi đến dung lượng trước và sau cùng phần trăm giảm màu xanh. Thanh phía trên có ba lựa chọn ở mục Chuyển sang: WOFF2 (chọn sẵn), WOFF, TTF / OTF.
Bốn font sau khi chuyển sang WOFF2, bên dưới là khung mã @font-face. Ảnh chụp màn hình: ColorME.
Số liệu thật từ lần thử của mình (cột WOFF lấy khi bấm sang lựa chọn WOFF):
| Font | File gốc | WOFF2 | Giảm | WOFF | Giảm |
|---|---|---|---|---|---|
| Be Vietnam Pro Regular | TTF 129,8 KB | 37,3 KB | −71% | 50,5 KB | −61% |
| Poppins Regular | TTF 156,6 KB | 50,3 KB | −68% | 70,4 KB | −55% |
| Lobster Regular | TTF 396,6 KB | 100,7 KB | −75% | 143,8 KB | −64% |
| Source Serif 4 Regular | OTF 235,7 KB | 104,8 KB | −56% | 132,4 KB | −44% |
| Cộng 4 file | 918,7 KB | 293,1 KB | −68% | 397,1 KB | −57% |
Phần hỏi đáp của trang công cụ ghi: “Với các font ColorME đã thử, WOFF2 nhẹ hơn file TTF hoặc OTF khoảng 55–75%; mức giảm tuỳ từng font.” Bốn font của mình nằm trong khoảng đó, riêng font OTF giảm ít nhất.
Bước 3: tải file WOFF2 về
Bấm Tải ở từng dòng, hoặc Tải tất cả để nhận hết. Tải tất cả cho ra từng file riêng, không gói thành file zip. File mới giữ tên gốc, chỉ đổi đuôi: BeVietnamPro-Regular.ttf thành BeVietnamPro-Regular.woff2.
Mình kiểm tra lại file tải về bằng lệnh file trên macOS:
BeVietnamPro-Regular.woff2: Web Open Font Format (Version 2), TrueType, length 38212, version 1.0
Lobster-Regular.woff2: Web Open Font Format (Version 2), TrueType, length 103088, version 1.0
SourceSerif4-Regular.woff2: Web Open Font Format (Version 2), CFF, length 107316, version 1.0Đúng là WOFF2 thật, và dung lượng khớp với con số trên trang (38.212 byte là 37,3 KB).
Bước 4: sao chép mã @font-face
Khung nền tối bên dưới danh sách chứa một khối @font-face cho mỗi font đã chuyển xong. Bấm Sao chép ở góc phải, trang báo “Đã sao chép CSS @font-face”.
Thông báo sau khi bấm Sao chép. Ảnh chụp màn hình: ColorME.
Đây là đúng đoạn công cụ viết cho Be Vietnam Pro:
@font-face {
font-family: 'Be Vietnam Pro';
src: url('/fonts/BeVietnamPro-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}Ba điều cần biết về đoạn mã này:
- Tên font được đọc từ bên trong file, nên là “Be Vietnam Pro” chứ không phải tên file.
- Đường dẫn luôn là
/fonts/tên-file.woff2. Nếu bạn đặt font ở thư mục khác thì sửa lại dòngsrc. - font-weight và font-style cũng lấy từ file. Cả bốn font Regular của mình đều ra
400vànormal. Với bản Bold hay Italic, bạn nên xem lại hai dòng này trước khi dùng.
font-display: swap nghĩa là trình duyệt hiện chữ bằng font dự phòng trước rồi đổi sang font của bạn khi tải xong. Vì vậy luôn ghi một font dự phòng sau dấu phẩy trong font-family.
Bước 5: dùng font WOFF2 trên trang web
Mình dựng một trang HTML nhỏ trên máy: chép ba file WOFF2 vào thư mục fonts cạnh file HTML, dán mã của công cụ, chỉ sửa /fonts/ thành fonts/ cho đúng thư mục. Sau đó gọi font bằng font-family như bình thường:
body { font-family: 'Be Vietnam Pro', sans-serif; }
h1 { font-family: 'Lobster', cursive; }
.lead { font-family: 'Source Serif 4', serif; }
Trang thử trong Chrome: tiêu đề Lobster, đoạn mở Source Serif 4, nội dung Be Vietnam Pro, đều từ file WOFF2 vừa chuyển. Dòng cuối là trạng thái trình duyệt báo: cả ba font “loaded”. Ảnh chụp màn hình: ColorME.
Font chuyển xong có còn đủ dấu tiếng Việt không?
Mình đưa từng file WOFF2 vào công cụ Kiểm tra font tiếng Việt (tab Font của bạn) rồi so với file gốc:
- Be Vietnam Pro, Lobster, Source Serif 4: bản gốc 146/146 ký tự, bản WOFF2 cũng 146/146.
- Poppins: bản gốc thiếu 88 ký tự, bản WOFF2 thiếu đúng 88 ký tự đó.
File WOFF2 của Be Vietnam Pro: 146/146 ký tự có dấu hiển thị đúng. Ảnh chụp màn hình: ColorME.
File WOFF2 của Poppins thiếu 88 ký tự, giống hệt file TTF gốc. Ảnh chụp màn hình: ColorME.
Kết luận: chuyển định dạng không làm mất dấu, cũng không vá được font thiếu dấu. Trang công cụ nói điều tương tự: “Font giữ nguyên bộ ký tự gốc. Nếu font gốc thiếu dấu, bản chuyển cũng thiếu”. Muốn xem font lên chữ ra sao trước khi chọn, bạn có thể thử font chữ online.
Đổi sang WOFF, hoặc chuyển WOFF2 ngược về TTF, OTF
Bấm WOFF hay TTF / OTF trên thanh công cụ, cả danh sách và khung mã đổi theo: đuôi file trong src và giá trị format() được viết lại ('woff', 'truetype', 'opentype').
Đổi định dạng đích, danh sách và mã CSS cập nhật theo. Quay màn hình: ColorME.
Cùng bốn font ở định dạng WOFF: vẫn nhẹ hơn bản gốc nhưng nặng hơn WOFF2. Ảnh chụp màn hình: ColorME.
Chiều ngược lại cũng chạy. Mình đưa file Poppins-Regular.woff2, Lobster-Regular.woff và SourceSerif4-Regular.woff2 vừa tải về vào công cụ, chọn TTF / OTF: nhận lại hai file .ttf và một file .otf, công cụ tự chọn đuôi theo loại font bên trong. Phần trăm lúc này màu cam và mang dấu cộng vì file to lên.
WOFF2 và WOFF chuyển ngược về TTF, OTF để cài vào máy. Ảnh chụp màn hình: ColorME.
Một chi tiết nhỏ: bản Poppins chuyển ngược nhẹ hơn file gốc 24 byte (160.292 so với 160.316 byte) và không còn chữ ký số của file gốc. Font vẫn cài và dùng bình thường, chỉ là không trùng từng byte với file ban đầu.
Lỗi thường gặp và giới hạn
- File không phải font: mình đổi đuôi một file văn bản thành .ttf rồi tải lên. Dòng đó hiện chữ đỏ “Không phải file font (TTF, OTF, WOFF, WOFF2).” và nút Tải bị khoá. Các font khác trong danh sách vẫn chuyển bình thường.
- File quá lớn: mình thử một file 41 MB chọn cùng lúc với Poppins. File 41 MB hiện thành một dòng riêng với chữ “File lớn hơn 40 MB nên không chuyển được.” và nút Tải bị khoá, còn Poppins vẫn chuyển bình thường. Font một kiểu chữ hiếm khi nặng đến vậy.
- Font lỗi: trang có sẵn thông báo “Không chuyển được file này, font có thể bị lỗi hoặc được bảo vệ.” Mình không gặp trường hợp này với bốn font thử.
File không phải font bị báo đỏ, font hợp lệ bên dưới vẫn chuyển được. Ảnh chụp màn hình: ColorME.
Dùng trên điện thoại được không?
Ở bề ngang 390 px, giao diện xếp lại gọn: thanh chọn định dạng xuống hai hàng, mỗi font một thẻ, khung mã tự xuống dòng và trang không bị kéo ngang. Trang công cụ lưu ý: “Có thể, nếu trình duyệt điện thoại cho phép chọn file font; trên máy tính sẽ thuận tiện hơn.” Mình mới xem bố cục ở cỡ màn hình điện thoại trên máy tính, chưa thử chọn file trên một chiếc điện thoại thật.
Giao diện ở bề ngang điện thoại. Ảnh chụp màn hình: ColorME.
Chuyển định dạng không đổi giấy phép của font
File WOFF2 vẫn là font đó, với đúng giấy phép đó. Font OFL như bốn font trong bài được phép nhúng lên web. Font thương mại thường cần giấy phép webfont riêng, có khi tính theo lượt xem trang. Hãy đọc giấy phép trước khi đưa font lên website, nhất là website của khách hàng.
Font của mình có bị gửi lên máy chủ không?
Mình trích nguyên câu trả lời trong phần hỏi đáp của trang công cụ: “Mọi chuyển đổi chạy ngay trên trình duyệt của bạn. Nếu bạn đã đăng nhập, file bạn tải về được lưu riêng vào mục Lịch sử của bạn và tự xoá sau 180 ngày.”
Câu hỏi thường gặp
Chuyển OTF sang WOFF2 có khác gì TTF không?
Cách làm giống hệt. Trong lần thử của mình, file OTF (Source Serif 4) giảm 56%, ít hơn ba file TTF (68–75%).
Nên dùng WOFF hay WOFF2 cho website?
Theo trang công cụ: “Nên dùng WOFF2 vì nhẹ nhất và mọi trình duyệt hiện đại đều hỗ trợ; WOFF chỉ cần khi phải hỗ trợ trình duyệt rất cũ.”
Chuyển nhiều font một lúc được không?
Được. Mình chọn bốn file cùng lúc, mỗi file thành một dòng và một khối @font-face riêng. Nút Thêm font cho phép bổ sung file mà không mất danh sách đang có.
Có cần khai báo cả WOFF lẫn WOFF2 trong @font-face không?
Công cụ chỉ viết một định dạng cho mỗi khối, theo lựa chọn đang bật. Nếu bạn cần cả hai, hãy tải cả hai bản rồi tự ghép hai url() vào một dòng src, đặt WOFF2 trước. Phần ghép này là bạn tự viết, công cụ không làm thay.
Thử ngay với font của bạn ở công cụ Chuyển đổi font.
