Cách tải phông chữ Google cục bộ trong WordPress: Một mục tối ưu hóa được tìm thấy trong GTmetrix, Pingdom và Google PageSpeed ​​Insights

Nếu trang web WordPress của bạn có Phông chữ Google lỗi trong GTmetrix/Bình thường, tải Google Fonts cục bộ nên sửa chúng.


Bạn có thể kiểm soát một số tài nguyên và tập lệnh bên ngoài, điều này khiến chúng không thể nén, thu nhỏ hoặc tối ưu hóa. Điều này có thể ảnh hưởng nghiêm trọng đến tốc độ WordPress của bạn. Một trong những tài nguyên bên ngoài phổ biến nhất là Google Fonts. Nếu bạn đã cấu hình một plugin bộ đệm như WP Rocket hoặc WP Fastest Cache, bạn có thể bắt đầu nhận thấy các tài nguyên bên ngoài như phông chữ ảnh hưởng đến điểm + thời gian tải. Đây là nơi tải Google Fonts cục bộ phát huy tác dụng. Điều này cho phép plugin bộ nhớ cache của bạn nén tất cả các tài nguyên liên quan đến (các) phông chữ tùy chỉnh của bạn.

Sao lưu toàn bộ trang web của bạn (hoặc ít nhất là các tệp bạn chỉnh sửa) trước khi thực hiện thay đổi.

Google-Phông chữ-GTmetrix

Bước 1: Chọn Phông chữ Google

Trong ví dụ này, chúng tôi sẽ sử dụng Phông chữ Roboto với hai trọng lượng phông chữ: thường (400) và đậm (700).

Google-Phông chữ-Lựa chọn

Sử dụng ít Google Fonts hơn – giữ Phông chữ Google của bạn ở mức tối thiểu (ít phông hơn = ít yêu cầu hơn).

Hãy chọn lọc với trọng lượng phông chữ – số lượng trọng lượng cũng ảnh hưởng đến thời gian tải. Nếu bạn chỉ cần phiên bản in đậm, hãy bỏ chọn các trọng số khác để Google Font chỉ tải những thứ bạn cần.

Bước 2: Tải xuống Phông chữ

Tải về các phông chữ khi bạn đã sẵn sàng. Google sẽ tự động tải xuống tất cả các trọng lượng phông chữ, do đó, việc lựa chọn trọng lượng phông chữ là không bắt buộc ở bước này và thay vào đó được yêu cầu trong bước 3.

Google-Phông chữ-Tải xuống

Bước 3: Chuyển đổi phông chữ thành phông chữ web

Tiếp theo, chúng tôi sẽ chuyển đổi các tệp phông chữ này (.ttf) thành các tệp phông chữ web. Tôi sẽ sử dụng Dịch giả. Tới trang web của họ, nhấp vào Thêm phông chữ, sau đó chỉ tải lên các loại phông chữ mà bạn sẽ sử dụng trên trang web của mình. Tôi đang sử dụng Roboto-Thường xuyên.ttfRoboto-Bold.ttf vì vậy tôi có cả trọng lượng thường xuyên và táo bạo. Để các cài đặt như mặc định vì WOFF và WOFF2 bao gồm tất cả các trình duyệt chính. Bây giờ bấm vào chuyển đổi.

Transfonter-Google-Font-Converter

Chỉ chọn các loại phông chữ mà bạn sẽ sử dụng trên trang web của bạn

Google-Phông chữ-Chuyển đổi-Lựa chọn

Bước 4: Tải xuống tập tin phông chữ đã chuyển đổi

Khi các phông chữ được chuyển đổi, bạn có thể tải chúng. Trong tệp zip, mỗi phông chữ sẽ bao gồm các định dạng WOFF và WOFF2 (vì chúng tôi đã tải xuống 2 phông chữ, chúng tôi sẽ có tổng cộng 4 tệp phông chữ).

Chuyển đổi WOFF-Google-Phông chữ

Bước 5: Tải tập tin phông chữ lên tập tin WordPress

Tải lên các tệp phông chữ web qua FTP hoặc cPanel, lý tưởng nhất là trong nội dung wp / tải lên thư mục để các bản cập nhật chủ đề và cốt lõi không ghi đè lên chúng. Tôi đã tạo một thư mục phông chữ của Wikipedia và tải chúng lên đó (để tách chúng khỏi các tệp khác). Để xác nhận chúng đã được tải lên thành công và bạn có các liên kết chính xác, hãy mở các liên kết trong trình duyệt của bạn và các phông chữ sẽ bắt đầu tải xuống.

Thí dụ:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

Thay thế yourwebsite.com với trang web của riêng bạn (và HTTPS nếu sử dụng SSL). Lý tưởng nhất là kiểm tra tất cả 4 liên kết và đảm bảo bạn có URL chính xác (và cũng chắc chắn lưu chúng ở đâu đó).

Bước 6: Thêm phông chữ tùy chỉnh vào CSS

Tiếp theo, chúng tôi sẽ thêm CSS bạn có trong tệp zip đã tải xuống có tên bảng định kiểu.css. Đây là mã CSS sẽ kết nối phông chữ của bạn với CSS hiện tại của bạn và làm cho chúng sẵn sàng để sử dụng.

Nơi đặt mã CSS là chủ quan nhưng bạn có thể sử dụng biểu định kiểu bên ngoài hoặc WordPress, wp_enqueue_style chức năng trong Hàm.php, hoặc khi bắt đầu style.css tập tin (hoặc custom.css nếu bạn có một cái) Tôi sẽ dán nó vào tập tin style.css mặc định của chủ đề. Sao chép / dán mã vào biểu định kiểu và thay đổi bất kỳ URL tương đối nào thành URL tuyệt đối.

URL mặc định trong styleheet.css:
định dạng src: url (‘Roboto-Bold.woff2’) (‘woff2’),
định dạng url (‘Roboto-Bold.woff’) (‘woff’);

Thay đổi những điều này thành:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Định dạng Roboto-normal.woff2 ‘) (‘ woff2 ‘),
url (‘http://yourwebsite.com/wp-content/uploads/fonts/Định dạng Roboto-Rout.woff ‘) (‘ woff ‘);

Về cơ bản, chỉ cần bao gồm URL thư mục trước tên tệp phông chữ.

Đây là tùy chọn nhưng nếu bạn thích, hãy tạo một lớp tùy chỉnh để dễ dàng sử dụng phông chữ trong HTML hiện có. Ở đây chúng tôi đặt tên cho các lớp học của chúng tôi roboto_fontroboto_bold_font. Để thực hiện việc này, hãy thêm tệp này vào tệp style.css của bạn (sau đoạn mã trên):

.roboto_font {

phông chữ-gia đình: hoàng Roboto, thời Arial, sans-serif;

}

.roboto_bold_font {

phông chữ-gia đình: hoàng Roboto, thời Arial, sans-serif;

font-weight: in đậm;

}

Bước 7: Kiểm tra phông chữ

Bây giờ tạo một trang thử nghiệm và đặt mã sau vào Trình soạn thảo văn bảnGiáo dục

Kiểm tra

Kiểm tra phông chữ tùy chỉnh

Kiểm tra phông chữ tùy chỉnh

Kiểm tra phông chữ của Google

Xem trước trang. Nếu bạn đã làm nó một cách chính xác, bạn sẽ thấy phông chữ tùy chỉnh mới! Tiêu đề đầu tiên là phông chữ mặc định của trang web của bạn, thứ hai và thứ ba là phông chữ Google Phông chữ chúng tôi đã thêm:

Phông chữ địa phương-Google

Bước 8: Đặt Phông chữ Mặc định

Để làm cho trang web này phông chữ mặc định của bạn, hãy thêm CSS này vào tệp style.css của bạn:

thân hình {

phông chữ-gia đình: hoàng Roboto, thời Arial, sans-serif;

}

Hãy cẩn thận! Nếu bạn đã có một phông chữ tùy chỉnh, nó có thể không xuất hiện chính xác và yêu cầu gỡ lỗi hoặc chỉnh sửa các thuộc tính họ phông chữ hiện có và thay thế chúng bằng phông chữ này thay thế.

Bước 9: Luôn có dự phòng phông chữ

Đó là một thực tế xấu khi áp dụng Google Font như một họ phông chữ. Thay vào đó, bạn nên có nhiều phông chữ được chỉ định bao gồm các phông chữ phổ biến như Arial, Times New Roman để trình duyệt có thể quay lại các phông chữ này trong trường hợp phông chữ không tải hoặc mất nhiều thời gian hơn để tải.

Không có dự phòng:
họ phông chữ: ‘Roboto’;

Với phông chữ dự phòng:
họ phông chữ: ‘Roboto’, Arial, sans serif;

Bây giờ, trong trường hợp không tải được Phông chữ Google của bạn, trình duyệt sẽ quay lại phông chữ Arial hoặc loại phông chữ sans-serif mặc định của hệ thống và không gây ra bất kỳ sự cố nào với kết xuất phông chữ.

Kiểm tra lại trang web của bạn (Trong GTmetrix)

Bạn không nên thấy bất kỳ lỗi Google Fonts nào trong đó.

Mới-GTmetrix-Báo cáo.png

Có một vài câu hỏi? Thả tôi một dòng.

Các câu hỏi thường gặp

&# x2705; Làm thế nào để bạn tăng tốc Google Fonts?

Kết hợp Google Fonts, lưu trữ chúng cục bộ, kết nối trước và hoàn thành chúng đều có thể giúp cải thiện thời gian tải của chúng. Kiểm tra Thác nước GTmetrix của bạn để có điểm chuẩn về phông chữ của bạn, sau đó kiểm tra lại sau khi tối ưu hóa.

&# x2705; Làm thế nào để chuyển đổi phông chữ các tập tin phông chữ web?

Chúng tôi sử dụng Transfonter.

&# x2705; Những gì về phông chữ tùy chỉnh Elementor?

Phông chữ tùy chỉnh Elementor cũng có thể lưu trữ Google Fonts cục bộ và được tích hợp sẵn cho Elementor Pro. Bạn có thể sử dụng điều này để tải lên các tập tin phông chữ của bạn.

&# x2705; Những plugin nào giúp tối ưu hóa phông chữ?

WP Rocket, OMGF, Tự động tối đa hóa và Perfmatters đều có thể giúp bạn tối ưu hóa phông chữ.

&# x2705; Những gì về tìm nạp trước và kết nối trước phông chữ?

Chúng có thể tăng tốc độ phông chữ bằng cách giúp trình duyệt dự đoán chúng tốt hơn. Chúng tôi sử dụng plugin Perfmatters của Kinsta để tìm nạp trước và kết nối trước phông chữ, nhưng bạn cũng có thể sử dụng plugin WP Rocket hoặc plugin Pre Party Resource Gợi ý.

Chúc mừng,
Usama

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