Cách sử dụng @font-face trong CSS
Trần Thị Vân - 1837
- 17/07/2025
Chức năng của @font-face trong CSS
@font-face trong CSS dùng để nhúng các file font chữ vào website, giúp website sử dụng được các font chữ khác ngoài các font chữ mặc định, giúp giao diện website có nhiều lựa chọn và linh động hơn.
Cách sử dụng @font-face trong CSS
font-family: OpenSansCondensed-Bold;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Cách sử dụng @font-face trong CSS</title>
<style>
@charset "utf-8";@font-face { font-family: OpenSansCondensed-Bold;src: url(https://webmoi.vn/media/css/fonts/OpenSansCondensed-Bold.ttf); font-display: swap;}
h1{font-family: OpenSansCondensed-Bold;font-size:18px;text-transform: uppercase;font-weight: initial;}
h2{font-size:18px;text-transform: uppercase;font-weight: initial;}
</style>
</head>
<body>
<p>Dùng để nhúng các file font chữ vào website, giúp website sử dụng được các font chữ khác ngoài các font chữ mặc định, giúp giao diện website có nhiều lựa chọn và linh động hơn:</p>
<h1>Chạy thử Cách sử dụng @font-face trong CSS</h1>
<h2>Chạy thử Cách sử dụng @font-face trong CSS</h2>
</body>
</html>
Ở đây thẻ h1 mình dùng font chữ đã nhúng vào, còn h2 mình để mặc định và kết quả sẽ khác nhau.
Những lưu ý khi sử dụng @font-face trong CSS
Sử dụng @font-face giúp website hiển thị đúng kiểu chữ mong muốn mà không phụ thuộc hoàn toàn vào font có sẵn trên thiết bị. Tuy nhiên, nếu khai báo thiếu định dạng, sai đường dẫn hoặc tải quá nhiều font, tốc độ và khả năng hiển thị của trang có thể bị ảnh hưởng.
Chọn định dạng font phù hợp cho website
Không nên đưa quá nhiều định dạng font vào website chỉ để dự phòng. Với các trình duyệt hiện đại, WOFF2 thường là lựa chọn phù hợp vì kích thước nhỏ và khả năng nén tốt. Khi dự án cần hỗ trợ môi trường cũ hơn, có thể cân nhắc thêm định dạng khác.
Khi khai báo, nên chỉ cung cấp những định dạng thực sự cần thiết để giảm số lượng tệp trình duyệt phải kiểm tra và tải xuống.
@font-face {
font-family: 'WebMoiFont';
src: url('/fonts/webmoi-font.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
Thiết lập font dự phòng để tránh lỗi hiển thị
Font tùy chỉnh có thể không tải được do sai đường dẫn, lỗi máy chủ hoặc sự cố mạng. Vì vậy, không nên chỉ khai báo một font duy nhất. Hãy xây dựng chuỗi font dự phòng để nội dung vẫn dễ đọc nếu font chính không khả dụng.
body {
font-family: 'WebMoiFont', Arial, sans-serif;
}
Trình duyệt sẽ lần lượt tìm font theo thứ tự đã khai báo. Nếu không tìm thấy WebMoiFont, nó có thể chuyển sang Arial rồi đến nhóm sans-serif.
Tối ưu tốc độ tải font với font-display
Font là tài nguyên bên ngoài cần tải về nên có thể ảnh hưởng đến thời điểm người dùng nhìn thấy nội dung. Thuộc tính font-display cho phép kiểm soát cách trình duyệt xử lý văn bản trong thời gian chờ font tùy chỉnh.
@font-face {
font-family: 'WebMoiFont';
src: url('/fonts/webmoi-font.woff2') format('woff2');
font-display: swap;
}
Với font-display: swap, trình duyệt có thể hiển thị văn bản bằng font dự phòng trước, sau đó chuyển sang font tùy chỉnh khi font đã tải xong. Cách này giúp nội dung không bị chờ quá lâu chỉ vì một tệp font.
Kiểm tra đường dẫn và khả năng tải font
Một lỗi rất thường gặp là khai báo @font-face đúng nhưng đường dẫn đến tệp font không chính xác. Khi đó, trình duyệt không thể tải font và website sẽ sử dụng font dự phòng.
Đường dẫn trong src cần được kiểm tra kỹ, đặc biệt khi font được đặt trong thư mục riêng hoặc website sử dụng đường dẫn tương đối và tuyệt đối khác nhau.
@font-face {
font-family: 'WebMoiFont';
src: url('/fonts/webmoi-font.woff2') format('woff2');
}
Ngoài đường dẫn, cũng nên kiểm tra tên font, font-weight và font-style. Nếu website có nhiều kiểu chữ như thường, đậm hoặc nghiêng, mỗi tệp cần được khai báo đúng đặc tính để trình duyệt chọn đúng font khi hiển thị.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Cách sử dụng @font-face trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
