Font TTF và OTF khác nhau thế nào? WOFF2 dùng khi nào

TTF và OTF đều là font OpenType, khác ở đường viền chữ TrueType hay CFF. ColorME đọc thử 6 file font thật, so dung lượng, và chỉ khi nào dùng WOFF2, WOFF cho website.

TTF và OTF đều là font OpenType: theo đặc tả OpenType của Microsoft, một file OpenType có thể mang đuôi .OTF hoặc .TTF, và điểm khác thật sự nằm ở kiểu đường viền chữ bên trong: TrueType outlines (bảng glyf, đường cong bậc hai) hoặc CFF (đường cong bậc ba). Khi cài font vào máy để dùng trong Photoshop, Illustrator hay Figma bản desktop, TTF hay OTF đều dùng được; nếu nhà làm font có cả hai, mình chọn bản họ khuyên dùng. WOFF2 là định dạng nén dành cho website, không dùng để cài vào máy.

Các định dạng font designer hay gặp: TTF, OTF, WOFF2, WOFF, TTC/OTC.

TTF là gì?

TTF là đuôi file của font TrueType. Apple vẫn giữ bộ tài liệu TrueType Reference Manual, và TrueType là nhãn hiệu của Apple. Ngày nay, font TTF bạn tải về gần như luôn là font OpenType có đường viền TrueType: đặc tả OpenType ghi font chứa TrueType outlines dùng giá trị 0x00010000 ở 4 byte đầu file và lưu hình chữ trong bảng 'glyf'.

Theo bảng định dạng của MDN, kiểu đường viền TrueType dùng đường cong Bézier bậc hai (quadratic). Với người dùng font, điều này gần như không thấy được khi gõ chữ; nó quan trọng với người vẽ font và người chuyển đổi font.

OTF là gì?

OTF là đuôi file phổ biến của font OpenType. Đặc tả của Microsoft mô tả OpenType là định dạng dạng bảng, chứa dữ liệu hình chữ "as TrueType or Compact Font Format (CFF) outlines", cùng dữ liệu bố cục chữ (chọn glyph, đặt vị trí trên dòng) và thông tin tên font. Font OTF dùng CFF hoặc CFF2 thì 4 byte đầu là 'OTTO', và theo MDN, CFF dùng đường cong Bézier bậc ba (cubic).

Điểm hay nhầm: "OpenType" không đồng nghĩa với ".otf". Trang khuyến nghị của Microsoft viết: font chỉ có TrueType outlines "should have either .OTF or .TTF extension", còn font chỉ có CFF outlines "should have an .OTF extension". Và câu quan trọng nhất: phần mềm phải xác định kiểu đường viền "not from the filename extension but from the contents of the file".

TTF và OTF khác nhau ở đâu?

Tính năng chữ như ligature hay chữ thay thế nằm trong các bảng bố cục (ví dụ GSUB), dùng được với cả hai kiểu đường viền. Vì vậy "OTF có nhiều tính năng hơn TTF" là cách hiểu cũ: một font có ligature hay không phụ thuộc vào người làm font, không phụ thuộc đuôi file.

TTF và OTF khác nhau ở kiểu đường viền chữ: TrueType (bậc hai) và CFF (bậc ba). Sơ đồ do ColorME vẽ.

ColorME thử: mở 4 byte đầu của font thật

Để kiểm chứng, mình tải bộ Source Sans 3 (giấy phép SIL Open Font License, bản phát hành trên GitHub có sẵn cả OTF, TTF, WOFF, WOFF2) và Be Vietnam Pro từ kho Google Fonts, rồi dùng một đoạn Python ngắn đọc 4 byte đầu và danh sách bảng của từng file. Kết quả ngày 21/10/2026:

Hai điều rút ra từ lần thử này. Một, cùng một kiểu chữ Source Sans 3 Regular, bản OTF và TTF có dung lượng khác nhau (bản TTF lớn hơn), nên đừng so font qua dung lượng. Hai, bản WOFF2 nhỏ hơn rõ rệt so với file gốc, kể cả so với WOFF: bản WOFF2 từ OTF chỉ bằng khoảng 46% file OTF, bản WOFF2 từ TTF khoảng 25% file TTF. Mức giảm mỗi font mỗi khác.

Dung lượng thật của 6 file font ColorME tải về và đo ngày 21/10/2026.

WOFF2 là gì, dùng khi nào?

WOFF2 (Web Open Font Format 2.0) là chuẩn W3C để đóng gói font cho website. Theo W3C, WOFF2 được làm ra để "improved compression and thus lower use of network bandwidth", nhờ bước tiền xử lý theo nội dung font và nén Brotli, thay cho nén Flate của WOFF 1.0. W3C cũng ghi WOFF2 "is implemented in all major browsers" và hỗ trợ toàn bộ TrueType, OpenType, kể cả variable font, font màu và font collection.

MDN viết "All modern browsers support WOFF2" và chỉ khuyên thêm WOFF khi cần hỗ trợ trình duyệt cũ. Cách khai báo cơ bản:

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("/fonts/BeVietnamPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

WOFF2 không phải để cài vào máy: hệ điều hành và phần mềm thiết kế cần TTF hoặc OTF. Nếu bạn chỉ có file .woff2 (ví dụ lấy từ một website) thì phải chuyển ngược về TTF/OTF, và chỉ làm khi giấy phép font cho phép.

Dùng WOFF2 cho website trong 3 bước, kèm đoạn CSS @font-face.

Bảng từ khoá format() trong @font-face

Khi viết CSS, bạn khai báo kiểu file bằng format(). Bảng dưới theo MDN:

MDN ghi chú thêm: hai giá trị opentype và truetype là tương đương, dù file dùng đường cong bậc ba (CFF/CFF2) hay bậc hai (glyf).

Variable font và font collection có đuôi gì?

• Variable font (một file chứa cả dải độ đậm, độ rộng): vẫn dùng .otf, .ttf, .otc hoặc .ttc. Microsoft gợi ý nếu muốn đánh dấu thì thêm "VF" vào cuối tên, ví dụ "Selawik-VF.ttf".
• Font collection (.ttc, .otc): nhiều font trong một file để dùng chung các bảng giống nhau, tiết kiệm dung lượng. Microsoft khuyên .TTC cho bộ chứa TrueType outlines, .OTC cho bộ chứa CFF hoặc CFF2.

Designer nên chọn định dạng nào?

• Cài vào máy để thiết kế: TTF hoặc OTF đều được. Nếu bộ font có cả hai, cài một loại thôi, đừng cài cả hai cùng tên để tránh trùng font trong menu.
• Làm website, landing page: WOFF2. Chỉ thêm WOFF khi khách hàng yêu cầu chạy trên trình duyệt rất cũ.
• Gửi file in, file thiết kế cho người khác: kiểm tra giấy phép font trước; nhiều font thương mại không cho gửi kèm file font.
• Thiết kế tiếng Việt: định dạng nào cũng không quyết định chuyện đủ dấu. Hãy kiểm tra font tiếng Việt trước khi chốt font cho dự án.

Chọn định dạng font theo việc bạn đang làm.

Muốn hiểu thêm các khái niệm như họ font, độ đậm, kerning, bạn xem mục font chữ trong thư viện thuật ngữ; còn nếu muốn học dùng chữ trong thiết kế bài bản, có lộ trình Graphic Designer của ColorME.

Đổi TTF, OTF sang WOFF2 và ngược lại

Công cụ đổi font sang WOFF2 của ColorME nhận TTF, OTF, WOFF và WOFF2, chuyển qua lại giữa các định dạng và tạo sẵn đoạn CSS @font-face. Về dữ liệu, trang công cụ ghi: "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ách làm từng bước và kết quả đo có trong bài chuyển font TTF sang WOFF2.

Đổi định dạng không đổi giấy phép của font. Font cấm nhúng web thì đổi sang WOFF2 vẫn không được dùng trên web.

Lỗi thường gặp với file font

• Cài cả bản TTF lẫn OTF của cùng một font: menu font hiện hai tên giống nhau, file thiết kế gửi đi có thể dùng nhầm bản. Gỡ một bản, giữ bản bạn dùng cho dự án.
• Đổi đuôi file bằng tay: đổi .otf thành .ttf không biến CFF thành TrueType. Như Microsoft viết, phần mềm nhận kiểu font từ nội dung file, không phải từ đuôi. Muốn đổi định dạng phải dùng công cụ chuyển đổi.
• Nhúng TTF thẳng lên website: trình duyệt vẫn đọc được, nhưng file nặng hơn WOFF2 nhiều. Ở lần thử trên, bản WOFF2 từ TTF chỉ còn khoảng một phần tư dung lượng.
• Quên khai báo format(): MDN ghi format() là gợi ý không bắt buộc nhưng giúp trình duyệt quyết định nhanh hơn có tải file đó hay không.
• Thấy chữ lỗi dấu sau khi đổi font: thường là font gốc thiếu glyph tiếng Việt, không phải lỗi định dạng. Kiểm tra lại font gốc bằng công cụ kiểm tra font tiếng Việt.

Câu hỏi thường gặp

Font TTF và OTF cái nào tốt hơn?

Không có cái nào tốt hơn tuyệt đối. Cả hai đều là font OpenType, khác nhau ở kiểu đường viền chữ (TrueType hoặc CFF). Với việc thiết kế hằng ngày, dùng loại nào cũng được; nếu nhà làm font có cả hai, chọn bản họ khuyên dùng.

File .ttf có phải là font OpenType không?

Thường là có. Đặc tả OpenType của Microsoft ghi font OpenType có thể mang đuôi .OTF, .TTF, .OTC hoặc .TTC, và font chỉ có TrueType outlines có thể dùng .OTF hoặc .TTF.

Có cài font WOFF2 vào máy được không?

WOFF2 là định dạng cho website. Muốn dùng trong phần mềm thiết kế, bạn cần bản TTF hoặc OTF, hoặc chuyển WOFF2 ngược về TTF/OTF khi giấy phép font cho phép.

Website nên dùng WOFF hay WOFF2?

WOFF2. MDN ghi mọi trình duyệt hiện đại đều hỗ trợ WOFF2; WOFF chỉ cần thêm khi phải hỗ trợ trình duyệt cũ.

Đổi TTF sang WOFF2 có làm mất dấu tiếng Việt không?

Chuyển định dạng giữ nguyên dữ liệu chữ của font, nên font đủ dấu thì bản WOFF2 vẫn đủ dấu. Nếu font gốc thiếu dấu thì bản nào cũng thiếu; hãy kiểm tra font gốc trước.

Nguồn

Đọc ngày 21/10/2026: Microsoft: OpenType font file, Microsoft: Recommendations for OpenType fonts, W3C: WOFF File Format 2.0, MDN: @font-face src, MDN: Web fonts, Apple: TrueType Reference Manual. Font thử: Source Sans 3 và Be Vietnam Pro (SIL Open Font License).