Cách thêm phông chữ web của Google vào chủ đề WordPress theo cách "đúng đắn"
Phông chữ của Google là nguồn tài nguyên miễn phí tuyệt vời dành cho các nhà thiết kế web. Trong WPBv4, chúng tôi đã bắt đầu sử dụng kết hợp Google Font phổ biến: Oswald và Lora. Một số người dùng đã hỏi chúng tôi cách thêm phông chữ Google Web vào chủ đề WordPress. Nếu bạn còn nhớ, chúng tôi đã hướng dẫn cách thêm phông chữ Google trong WordPress Post Editor. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm Google Web Fonts vào chủ đề WordPress của bạn cách ĐÚNG, được tối ưu hóa cho hiệu suất.
Tìm Phông chữ Web của Google mà bạn thích
Điều đầu tiên bạn cần làm là tìm một phông chữ Google mà bạn thích. Hãy truy cập phông chữ của Google và duyệt qua thư viện. Khi bạn tìm thấy phông chữ mình thích, hãy nhấp vào nút “Sử dụng nhanh”.
Khi bạn nhấp vào nút sử dụng nhanh, bạn sẽ được đưa đến một trang mới. Cuộn xuống cho đến khi bạn thấy hộp hướng dẫn sử dụng có mã mà bạn có thể thêm vào trang web của mình.
Bạn sẽ thấy có ba tab khác nhau để thêm phông chữ vào trang web của mình. Cách đầu tiên là phương pháp tiêu chuẩn và được đề xuất để thêm phông chữ Google vào trang web của bạn. Tab thứ hai sử dụng phương thức CSS @import và tab cuối cùng sử dụng phương thức JavaScript.
Chúng tôi sẽ chỉ cho bạn cách sử dụng từng phương pháp này và những ưu và nhược điểm.
Thêm phông chữ web của Google vào chủ đề WordPress
Chúng tôi chủ yếu thấy mọi người sử dụng hai phương pháp đầu tiên.
Cách dễ nhất là mở tệp style.css của chủ đề và dán mã phông chữ bạn có trong tab @import, như sau:
@import url(https://fonts.googleapis.com/css?family=Lora); @import url(https://fonts.googleapis.com/css?family=Oswald);
Bạn cũng có thể kết hợp nhiều yêu cầu phông chữ thành một. Đây là cách bạn sẽ làm điều đó:
@import url(https://fonts.googleapis.com/css?family=Lora|Oswald);
Phương pháp này cực kỳ dễ dàng nhưng nó không phải là cách tốt nhất để thêm phông chữ Google vào trang web WordPress của bạn. Sử dụng phương pháp @import chặn tải xuống song song, có nghĩa là trình duyệt sẽ đợi tệp đã nhập tải xuống xong trước khi bắt đầu tải xuống phần còn lại của nội dung.
Nếu bạn PHẢI sử dụng @import thì ít nhất hãy kết hợp nhiều yêu cầu thành một.
Phương pháp tối ưu hóa hiệu suất khi thêm phông chữ web của Google
Cách tốt nhất để thêm phông chữ Google là sử dụng phương pháp Tiêu chuẩn sử dụng phương pháp liên kết thay vì phương pháp nhập. Chỉ cần lấy URL phông chữ mà bạn nhận được từ bước 1. Nếu bạn đang thêm nhiều phông chữ thì bạn có thể kết hợp hai phông chữ với | tính cách. Sau đó đặt mã vào phần đầu của chủ đề.
Rất có thể bạn sẽ phải chỉnh sửa tệp header.php và dán đoạn mã sau lên trên biểu định kiểu chính của mình. Ví dụ sẽ trông như thế này:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora|Oswald" media="screen"> <link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">
Về cơ bản mục tiêu là đặt yêu cầu phông chữ càng sớm càng tốt. Theo blog Google Web Fonts, nếu có thẻ script trước khai báo @font-face thì Internet Explorer sẽ không hiển thị bất kỳ thứ gì trên trang cho đến khi tải xuống xong tệp phông chữ.
Sau khi hoàn thành việc đó, bạn chỉ cần bắt đầu sử dụng nó trong tệp CSS của chủ đề như thế này:
h1 {
font-family: 'Oswald', Helvetica, Arial, serif;
}Hiện nay có rất nhiều khung chủ đề và chủ đề con. KHÔNG nên sửa đổi các tệp của chủ đề gốc, đặc biệt nếu bạn đang sử dụng khung chủ đề vì những thay đổi của bạn sẽ bị ghi đè vào lần tiếp theo bạn cập nhật khung đó. Bạn sẽ cần sử dụng các móc và bộ lọc mà chủ đề hoặc khung chính đó cung cấp cho bạn để thêm phông chữ Google đúng cách vào các chủ đề con của bạn.
Sắp xếp các phông chữ Google đúng cách trong WordPress
Một cách khác để thêm phông chữ Google vào trang web WordPress của bạn là thêm phông chữ vào hàng đợi trong tệp tin.php của chủ đề hoặc một plugin dành riêng cho trang web.
function wpb_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
Đừng quên thay thế liên kết phông chữ bằng liên kết phông chữ của riêng bạn.
Tải phông chữ của Google bằng JavaScript
Đối với phương pháp này, bạn sẽ cần sao chép mã trong tab JavaScript trong phần hướng dẫn sử dụng phông chữ của Google. Bạn có thể dán mã này vào tệp header.php của chủ đề hoặc chủ đề con ngay sau thẻ
.Mẹo cuối cùng của chúng tôi về việc sử dụng Google Web Fonts trên trang web của bạn là không tải những phông chữ bạn sẽ không sử dụng. Ví dụ: nếu bạn chỉ muốn kiểu đậm và độ dày bình thường thì đừng thêm tất cả các kiểu khác.
Chúng tôi hy vọng rằng bài viết này đã giúp bạn thêm Google Web Fonts vào chủ đề WordPress của mình đúng cách để trang web của bạn có thể tải nhanh. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách thêm phông chữ Typekit trong WordPress.
Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.