Hướng dẫn cài đặt font chữ đẹp từ Google Fonts cho WordPress

Bạn có thấy NguyenHaiBlog.com hôm nay có gì mới không ?. Là font chữ ư ?, đúng rồi đó. Hải vừa thay đổi font chữ từ mặc định Arial sang kiểu bắt mắt, ngộ nghĩnh và tinh tế hơn. Hải sử dụng font chữ đẹp từ Google Fonts, có rất nhiều kiểu cho mọi người lựa chọn. Vậy Google Fonts là gì ?, làm sao để cài đặt Google fonts vào website, blog WordPress ?. Bài viết này Hải sẽ bật mí những kinh nghiệm nho nhỏ từ thực tế cho các bạn.

Mách bạn cách tải font chữ từ Google Fonts về máy tính

cài đặt Google Fonts cho WordPress

Google Fonts là một thư viện gồm hơn 800 phông chữ được cấp phép miễn phí, một thư mục web tương tác để duyệt thư viện và API để thuận tiện sử dụng phông chữ thông qua CSS và Android. Wikipedia (tiếng Anh) .

Từng bước cài đặt Google Fonts cho WordPress của bạn

Mặc dù trên Google có rất nhiều bài hướng dẫn khác nhau. Tuy nhiên theo Hải thấy có nơi họ bảo dùng Plugin, nơi thì code này nọ rất khó hiểu. Sau một hồi loay hoay thì Hải đã tìm được cách đơn giản nhất, dễ hiểu để bạn dễ dàng cài đặt font chữ đẹp cho Blog WordPress của mình.

Bước 1: Chọn Google Fonts muốn sử dụng

Truy cập vào trang web chính thức tại đây

Giao diện nó sẽ như ảnh bên dưới, có một vài lưu ý:

  • Categories: Chọn tất cả
  • Languages: Vietnamese, để hiển thị những font chữ hỗ trợ Tiếng Việt.

cài đặt Google Fonts cho WordPress

Bạn viết thử một vài từ nào đó vào font bất kì để xem nó hiển thị ra sao.

Ví dụ bây giờ bạn muốn chọn kiểu font chữ tròn, Quicksan là giải pháp cho bạn. Hải thấy rất nhiều trang họ dùng kiểu này.

cài đặt Google Fonts cho WordPress

Bạn nhấn dấu + tại font chữ muốn dùng.

Đây là thông tin mà chúng ta sẽ dùng để cài đặt cho WordPress.

cài đặt Google Fonts cho WordPress

Để thay đổi đậm nhạt cho font, bạn nhấn vào Customize.

cài đặt Google Fonts cho WordPress

Bước 2: Cài đặt font chữ WordPress

Copy đoạn mã Embed Font ở trên, nó có dạng:

<link href=”https://fonts.googleapis.com/css?family=Quicksand” rel=”stylesheet”>

Nếu là font khác thì nó sẽ hiện tên font thay chữ Quicksand.

Bạn đi tới quản trị WordPress, chọn mục Appearance -> Editor.

Dán mã đó vào trước thẻ </head> thuộc file header.php.

Nhấn Save để lưu lại thay đổi.

Bây giờ tới phần chỉnh sửa file CSS, nó nằm tại file style.css trong mục Editor.

Thay đổi font chữ sang dạng:

font-family: ‘Quicksand’, sans-serif;

Tất nhiên là bạn chọn font nào thì phải lấy mã css ở trang Google Fonts tương ứng rồi.

Nghĩa là thay font chữ đoạn văn, các thẻ tiêu đề H1 đến H6, rồi menu, widget nếu muốn.

Ví dụ cho bạn dễ hình dung:

Lưu lại sau khi bạn chỉnh sửa hoàn tất.

Xoá cache nếu như bạn cài WP Super Cache hay plugin cache nào đó nhé.

Tại NguyenHaiBlog.com, Hải cài font chữ Josefin Sans, và thành quả nè

cài đặt Google Fonts cho WordPress

Cách xác định font chữ của Blog, Website bất kì

Bạn tình cờ vào 1 trang web và thấy font chữ tuyệt đẹp, đúng như gu thẩm mỹ. Họ cũng dùng Google Fonts, nhưng làm sao để biết đó là font gì.

Đừng lo, bạn hãy cài tiện ích WhatFont trên Chrome tại đây

Sau khi cài xong, bạn nhấn chuột trái vào biểu tượng trên góc phải.

cài đặt Google Fonts cho WordPress

Bây giờ bạn chỉ cần rê chuột tới vùng chữ bạn muốn kiểm tra là font gì.

Wow, kết quả chính xác font Hải đang dùng cho Blog kìa.

cài đặt Google Fonts cho WordPress

Vậy là bạn đã biết cách tìm kiếm, cài đặt font chữ đẹp từ Google Fonts cho Blog WordPress, Website của mình rồi chứ ?. Nếu gặp khó khăn hay cần hỗ trợ thì bạn để lại comment cuối bài. Thấy hay thì hãy chia sẻ lên Facebook để ủng hộ Blog nhé.

Hướng dẫn cài đặt font chữ đẹp từ Google Fonts cho WordPress
5 (100%) 3 votes

10
Leave a Reply

avatar
3 Comment threads
7 Thread replies
3 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
Nguyễn HảiĐứcJayChauBKV PLUS Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
BKV PLUS
Guest

Hay quá bạn ơi! Tặng 1 QC click nhé. Mình đọc sơ qua thấy hấp dẫn rồi. Chắc mai mới tìm hiểu và cài được. Trước kia mình dùng Plugin Easy Google Fonts, máy tính thì không bị lỗi, nhưng nó lại bị lỗi font trên điện thoại. Bài viết bạn rất chi tiết, Thanks You bạn!

JayChau
Guest
JayChau

viết chả hieu cái mẹ gì

Đức
Guest

bạn ơi cái option theme của mình có tích hợp google font và nó cho hiển thị ở widget, menu các thứ
Nhưng mình muốn chữ mặc định khi viết bài là roboto chả hạn thì làm thế nào

mình vào style.css của theme thậm chí còn ko có font-family để đổi cơ

à mà trình soạn thảo minh đang dùng plugin TinyMCE Advanced

demo: https://keepmovingvn.com