1. Quy tắc  @font-face trong CSS

Phông chữ trong trang web cho phép các nhà thiết kế web sử dụng phông chữ không được cài đặt trên máy tính của người dùng

Khi bạn đã tìm thấy / mua được phông chữ bạn muốn sử dụng, chỉ cần đưa tệp phông chữ vào máy chủ của trang web của bạn và nó sẽ được tự động tải xuống cho người dùng khi cần

Phông chữ của riêng bạn được xác định trong bằng quy tắc @font-face trong CSS

2. Các định dạng phông chữ khác nhau

2.1 Phông chữ TrueType (TTF)

TrueType là một tiêu chuẩn phông chữ được phát triển vào cuối những năm 1980 bởi Apple và Microsoft. TrueType là định dạng phông chữ phổ biến nhất cho cả hệ điều hành Mac OS và Microsoft Windows

2.2 Phông chữ OpenType (OTF)

OpenType là một định dạng cho các phông chữ máy tính có thể mở rộng. Nó được xây dựng trên TrueType và là thương hiệu đã đăng ký của Microsoft. Ngày nay phông chữ OpenType được sử dụng phổ biến trên các nền tảng máy tính lớn.

2.3 Phông chữ Web Open Font Format (WOFF)

WOFF là một định dạng phông chữ để sử dụng trong các trang web. Nó được phát triển vào năm 2009, và hiện là một Khuyến nghị của W3C. WOFF về cơ bản là OpenType hoặc TrueType với tính năng nén và siêu dữ liệu bổ sung. Mục tiêu là hỗ trợ phân phối phông chữ từ máy chủ đến máy khách qua mạng có hạn chế về băng thông.

2.4 Phông chữ Web Open Font Format (WOFF 2.0)

Phông chữ TrueType / OpenType cung cấp khả năng nén tốt hơn WOFF 1.0

2.5 Phông chữ shape /  SVG

Phông chữ SVG cho phép SVG được sử dụng làm glyphs khi hiển thị văn bản. SVG 1.1 xác định mô-đun phông chữ cho phép tạo phông chữ trong tài liệu SVG. Bạn cũng có thể áp dụng CSS cho tài liệu SVG và quy tắc            @ font-face có thể được áp dụng cho văn bản trong tài liệu SVG

2.6 Phông chữ Embedded OpenType (EOT)

Phông chữ EOT là một dạng phông chữ OpenType nhỏ gọn được Microsoft thiết kế để sử dụng làm phông chữ nhúng trên các trang web

3. Các trình duyệt hỗ trợ

Phông chữ
TTF/OTF 9.0 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG Không hỗ trợ Không hỗ trợ Không hỗ trợ 3.2 Không hỗ trợ
EOT 6.0 Không hỗ trợ Không hỗ trợ Không hỗ trợ Không hỗ trợ