Hướng dẫn đổi font chữ trong WordPress

Đổi font chữ Google trong website WordPress

Nếu bạn là một tay mơ về lập trình, thì hướng dẫn sau sẽ giúp bạn tự mình chuyển font chữ trong website WordPress sang một font chữ khác nhanh chóng.

Kiểm tra giao diện hỗ trợ chức năng Tuỳ biến

Đầu tiên, bạn cần kiểm tra xem giao diện hiện tại của bạn có hỗ trợ chức năng “Tuỳ biến” không nhé:

Nếu hỗ trợ, giao diện của bạn sẽ có menu ‘Tuỳ biến” như trong hình

Chọn font chữ từ Google Fonts

Tiếp đến, ta cần chọn font chữ từ fonts.google.com. Thao tác lần lượt như sau:

Bước 1: Trong cột lọc font, bạn nhớ chọn “Language” là “Vietnamese” để hạn chế việc lỗi font khi có dấu tiếng Việt nhé.

Lựa chọn chỉ font nào hỗ trợ tiếng Việt trong Google Fonts

Bước 2: Bạn chọn font mình thích và click vào dấu (+) ở bên cạnh. Tối đa nên chọn 2 font thôi (một cho Heading chữ to và một cho toàn bộ nội dung còn lại).

Thêm font vào giỏ trong Google Fonts

Bước 3: Trong tab Customize của popup mở ra, bạn chọn cấu hình các kiểu chữ của font đã chọn như Weight (độ đậm nhạt, từ 100 đến 900) và Languages (nhớ chọn Vietnamese)

Cấu hình font chữ trong Google Fonts

Bước 4: Quay trở lại website, giờ tới lúc bạn nhúng font chữ vào trong web của mình rồi. Hãy truy cập vào mục “Tuỳ biến”, tìm đến mục “CSS bổ sung”:

Lựa chọn mục “CSS bổ sung”

Bước 5: Tại cửa sổ trình duyệt của fonts.google.com, bạn chuyển qua tab “Embed” và lấy 2 thông tin:

Trong mục “@IMPORT“, bạn copy phần code trong thẻ <style></style>

Còn trong mục “Specify in CSS”, bạn copy nốt cả phần font-family: ...

Giờ, trong mục “CSS bổ sung” trên website WordPress, bạn dán các code đó vào như ví dụ dưới đây:

@import url('https://fonts.googleapis.com/css?family=Muli:400,700&subset=vietnamese');

body {
  font-family: 'Muli', Arial, Helvetica, sans-serif;
}

Nếu bạn chưa thấy hiệu quả, bạn có thể cần thêm !important vào sau để nó trông như thế này:

font-family: 'Muli', Arial, Helvetica, sans-serif !important;

Cuối cùng, bạn nhấp vào nút “Xuất bản” để nó có hiệu lực nhé.

Cách khác: Sử dụng plugin hỗ trợ đổi font chữ trong WordPress

Mình bổ sung thêm một cách khác dành cho ai ngại sử dụng code ở trên.

Bạn có thể cài đặt plugin “Easy Google Fonts” để dễ dàng thực hiện chuyển đổi font chữ này. 

Biên tập ngôn ngữ tiếng Việt cho WordPress. Có blog riêng mang tên Code Tốt. Làm việc với WP từ năm 2011.

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Phan Viết Đô Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Phan Viết Đô
Guest
Phan Viết Đô

Có vẻ như là với font thì CSS nên thêm !important vào sau đuôi để hiển thị đúng font trên trình duyệt của Iphone và Sarafi. Lần trước em cũng bị chỗ này, sau thêm !important vào sau font-family thì ổn.