Cách cài Font chữ Roboto cho WordPress

Cách cài Font chữ Roboto cho WordPress

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

font-roboto-1-min

Bạn sẽ thấy có 4 kết quả, chính là 4 loại Font Roboto

font-roboto-2-min

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

font-roboto-3-min

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.

font-roboto-4-min

Nhìn bên dưới và chọn vào Việt Nam

font-roboto-5-min

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>

font-roboto-6-min

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.

tai-font-roboto-themevi-min

Gửi một bình luận