Roboto là font chữ khá đẹp và được sử dụng nhiều trong các blog WordPress. Vậy làm sao để cài font chữ Roboto cho WordPress?
Bước 1. Lấy mã nhúng font Roboto
Truy cập vào Fonts.Google.com và gõ Roboto vào ô Tìm kiếm
Bạn sẽ thấy có 4 kết quả, chính là 4 loại Font Roboto
Bấm vào kí hiệu mũi tên nền đỏ màu trắng, rồi bấm vào thanh đen xuất hiện ngay dưới màn hình, bạn sẽ thấy
- Embed Font: Liên kết để nhúng Font vào Website
- Specify in CSS: Đoạn code CSS để sử dụng FOnt
Bấm vào Tab Customize để chọn kiểu chữ và ngôn ngữ
Càng chọn nhiều thì sẽ càng ảnh hưởng tới tốc độ tải trang web. Ở bên phải có phần Load Time. Mỗi khi chọn thêm 1 kiểu chữ thì nó sẽ hiển thị tốc độ tương ứng.
Nhìn bên dưới và chọn vào Việt Nam
Bước 2. Nhúng Font Roboto vào WordPress
Truy cập vào Giao diện > Sửa và tìm file Header.php.
Sau đó chèn liên kết ở phần Embed Font đã lấy ở trên, vào trước thẻ </head>
Bạn cũng có thể sử dụng Plugin Insert Headers and Footers và chèn vào Script in Header qua bài viết này (Bước 7 – Cách 2 nhé).
Bước 3. Sử dụng Font
Cú pháp xài Font là:
thẻ-html {
font-family: ‘Roboto’, sans-serif;
}
TRONG ĐÓ: thẻ-html chính là HTML Tag hoặc Class/ID CSS muốn đổi Font.
Nếu muốn áp dụng font cho toàn bộ thẻ h1, h2, h3, h4, h5, h6 thì chỉ cần xài. Xài cho thẻ nào thì chỉ cần thay đổi h1 thành thẻ đó.
h1 {font-family: ‘Roboto’, sans-serif;}
Trường hợp muốn sử dụng cho nhiều thẻ thì:
h1, h2, h3 {font-family: ‘Roboto’, sans-serif;}
Các thẻ ngăn cách nhau bởi dấu phẩy.
Nếu muốn dùng font Roboto cho toàn bộ nội dung bài viết thì hãy xài cho thẻ p, vì nội dung là thẻ p mà
p {font-family: ‘Roboto’, sans-serif;}
Có thể chèn vào style.css hoặc CSS Bổ sung (CSS tùy chỉnh) trong Giao diện > Tùy chỉnh (hoặc Tùy biến) > CSS Bổ sung nhé.
Bạn cũng có thể tải Font chữ Roboto, sau đó up lên Hosting và tiến hành Import Font, tương đối phức tạp với bạn không biết kĩ thuật nên mình không đề cập kĩ ra.
