Tôi thường sử dụng các font an toàn như Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia cho website của mình. Những font này được gọi là an toàn vì khi hiển thị trên trình duyệt, chúng không gây ra lỗi.
Tuy nhiên, những font này thường không đẹp cho lắm. Nếu bạn muốn thay thế bằng một font khác đẹp hơn, trong CSS3, chúng ta có thể sử dụng @font-face để gọi font chữ độc lạ bất kỳ. Điều này giúp cho những người thiết kế website phía Front end không còn phải lo lắng về vấn đề font chữ nữa.
Các kiểu font mà hầu hết các trình duyệt như Chrome, Firefox, IE hỗ trợ bao gồm:
- .ttf (true type font)
- .otf (OpenType)
- .woff (Web Open Font Format)
Cách dùng @font-face trong CSS
Đầu tiên bạn phải Download font chữ yêu thích tại Google Font. Bạn có thể xem hướng dẫn về Cách chỉnh font chữ trong WordPress.
Sau khi tải về bạn cần đặt ở một thư mục nào đó, chẳng hạn mình sẽ đặt là font. Giải nén ra sẽ thấy danh sách các kiểu font.
Cách gọi:
@font-face {
font-family: Open Sans;
src: url(https://quachquynh.com/wp-content/themes/quachquynh/fonts/OpenSans/OpenSans-Regular.ttf);
}
body {
font-family: "Open Sans", Arial, sans-serif;
}
Giải thích:
- Trước tiên phải gọi tên Font
- src: là đường dẫn tới thư mục chứa Font chữ đó. Cần phải gọi chính xác.
- font-family: “Open Sans”, Arial, sans-serif; sẽ gọi font ra. Bên cạnh đó cũng thêm 2 font dự phòng là Arial và sans-serif. Trong trường hợp trình duyệt không hỗ trợ nó sẽ hiển font dự phòng.
[danger-box text=’Lưu ý: Cần phải đặt trong 2 dấu ngoặc kép “Roboto.”‘]
Với cách gọi này, tôi khuyên bạn không nên lạm dụng quá nhiều. Chỉ nên giới hạn một vài Font mà thôi. Bởi nó sẽ ảnh hưởng tới thời gian phản hồi máy chủ khiến cho tốc độ website bị chậm lại.
Với bài hướng dẫn sử dụng font-face trong CSS trên đây, nếu có bất kỳ thắc mắc gì, xin vui lòng để lại bình luận bên dưới để được hỗ trợ.
