Cách thêm các phông chữ trên web của Google trong WordPress Chủ đề theo cách của Right Right

Phông chữ Google là tài nguyên miễn phí tuyệt vời 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 của chúng tôi đã hỏi chúng tôi cách thêm phông chữ Google Web trong các chủ đề WordPress. Nếu bạn còn nhớ, chúng tôi đã chỉ cho bạ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 trong các chủ đề WordPress của bạn Đúng cách, tối ưu hóa cho hiệu suất.


Tìm các 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. Truy cập vào phông chữ của Google và duyệt qua thư viện. Khi bạn tìm thấy phông chữ mà bạn thích, nhấp vào Sử dụng nhanh cái nút.

Sử dụng nhanh các phông chữ từ Google Fonts

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 với mã mà bạn có thể thêm vào trang web của mình.

Mã nhúng phông chữ của Google

Bạn sẽ thấy rằng có ba tab khác nhau để thêm phông chữ vào trang web của bạn. 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 là gì.

Video hướng dẫn

Đăng ký WPBeginner

Nếu bạn không thích video hoặc cần thêm hướng dẫn, hãy tiếp tục đọc.

Thêm Google Web Fonts trong WordPress Themes

Chúng tôi hầu hết đã thấy những người sử dụng hai phương pháp đầu tiên.

Cách dễ nhất là mở chủ đề của bạn style.css tệp và dán mã phông chữ mà bạn có trong tab @import, như thế này:

@import url (https://fonts.googleapis.com/css?f Family=Lora);
@import url (https://fonts.googleapis.com/css?f 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 dễ 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 thức @import chặn tải xuống song song, có nghĩa là trình duyệt sẽ đợi tệp đã nhập hoàn tất tải xuống 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 để 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 thức liên kết thay vì phương thức nhập. Chỉ cần lấy URL phông chữ của bạn 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 một | tính cách. Sau đó đặt mã trong phần đầu chủ đề của bạn.

Rất có thể bạn sẽ phải chỉnh sửa tệp header.php của mình và dán đoạn mã sau lên trên biểu định kiểu chính của bạn. Ví dụ sẽ như thế này:

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 khi khai báo @ font-face, thì Internet Explorer sẽ giành được kết xuất bất cứ thứ gì trên trang cho đến khi tải xuống tệp font.

Khi bạn đã thực hiện điều đó, bạn chỉ cần bắt đầu sử dụng nó trong tệp CSS CSS chủ đề của mình như thế này:

h1 {
họ phông chữ: ‘Oswald’, Helvetica, Arial, serif;
}

Bây giờ có rất nhiều khung chủ đề và chủ đề con ngoài kia. KHÔNG nên sửa đổi các tập tin chủ đề cha mẹ của bạn đặc biệt nếu bạn đang sử dụng khung chủ đề vì các 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 được trình bày cho bạn theo chủ đề hoặc khung chính đó để thêm phông chữ Google đúng cách trong các chủ đề con của bạn.

Sử dụng đúng phông chữ của Google trong WordPress

Một cách khác để thêm phông chữ Google vào trang web WordPress của bạn là bằng cách sử dụng phông chữ trong tệp chủ đề của bạn..

hàm wpb_add_google_fonts () {

wp_enqueue_style (‘wpb-google-phông chữ’, ‘https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, sai);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

Don mệnh quên thay thế liên kết phông chữ của riêng bạn.

Đang tải Google Fonts 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 chủ đề của mình hoặc chủ đề con Tập tin tiêu đề..

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 sẽ là tặng các phông chữ tải mà bạn đã giành được sử dụng. Ví dụ: nếu bạn chỉ muốn in đậm và cân nặng bình thường, thì don lồ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 trong các chủ đề WordPress của bạn đú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.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map