VietNetwork.Vn

Bạn có muốn thêm phông chữ của bên thứ ba vào trang web của mình mà không làm chậm tốc độ trang web không?

Phông chữ tùy chỉnh cải thiện kiểu chữ và trải nghiệm người dùng trên trang web của bạn nhưng chúng mất nhiều thời gian hơn để tải. Tin vui là bạn có thể lưu trữ cục bộ các phông chữ của mình để đảm bảo trang web của bạn luôn hoạt động nhanh.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách lưu trữ phông chữ cục bộ trong WordPress.

Tại sao lưu trữ phông chữ cục bộ trong WordPress?

Mặc dù kiểu chữ và phông chữ tùy chỉnh có thể cải thiện tính thẩm mỹ tổng thể của trang web, nhưng chúng có tác động tiêu cực đến hiệu suất WordPress của bạn. Ví dụ: nếu bạn đang sử dụng phông chữ tùy chỉnh từ phông chữ của Google, thì chúng được tải từ các dịch vụ của bên thứ ba, điều này sẽ làm chậm trang web của bạn.

May mắn thay, có một cách để sử dụng phông chữ tùy chỉnh mà không làm chậm trang web của bạn. Một API Webfonts mới đã được giới thiệu trong WordPress 6.0. Điều này cho phép bạn lưu trữ phông chữ cục bộ để chúng tải nhanh hơn.

Một lý do khác để lưu trữ Google Fonts cục bộ là tuân thủ GDPR. Đó là một cân nhắc pháp lý quan trọng nếu bạn có khách truy cập trang web từ Liên minh Châu Âu.

Khi ai đó truy cập trang web sử dụng Google Fonts, địa chỉ IP của họ sẽ được Google ghi lại khi phông chữ được tải. Vì điều này được thực hiện mà không có sự cho phép của họ nên EU hiện coi đó là hành vi vi phạm các quy định về quyền riêng tư và bạn có thể phải chịu trách nhiệm bồi thường thiệt hại.

Như đã nói, chúng ta hãy xem cách lưu trữ phông chữ cục bộ trong WordPress để trang web nhanh hơn. Chúng tôi sẽ đề cập đến hai phương pháp và phương pháp đầu tiên được khuyến nghị cho hầu hết người dùng.

• Phương pháp 1: Lưu trữ phông chữ cục bộ trong WordPress bằng plugin
• Phương pháp 2: Lưu trữ phông chữ cục bộ trong WordPress theo cách thủ công

1. Phương pháp 1: Lưu trữ phông chữ cục bộ trong WordPress bằng plugin

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin OMGF (Optimize My Google Fonts). Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

OMGF là một trong những plugin kiểu chữ WordPress tốt nhất. Nó cung cấp một cách thân thiện với người mới bắt đầu để cải thiện hiệu suất và tuân thủ GDPR bằng cách lưu trữ Google Fonts cục bộ.

Sau khi kích hoạt, bạn cần truy cập Cài đặt »Tối ưu hóa Google Fonts để định cấu hình plugin. Bạn nên xem tab 'Tối ưu hóa phông chữ'.

Lưu ý câu lệnh dưới tiêu đề 'Tối ưu hóa Google Fonts' rằng bạn chỉ cần sử dụng cài đặt mặc định để tự động thay thế Google Fonts của mình bằng các bản sao được lưu trữ cục bộ.


Điều đó có nghĩa là khi bạn cuộn xuống trang cài đặt, tất cả những gì bạn cần làm là đảm bảo rằng 'Tùy chọn hiển thị phông chữ' có cài đặt mặc định là 'Hoán đổi (được khuyến nghị)' được chọn.

Tất cả những gì bạn cần làm bây giờ là nhấp vào nút 'Lưu & Tối ưu hóa' ở cuối trang.


Bạn sẽ thấy một thông báo ở đầu màn hình cho biết 'Đã hoàn tất quá trình tối ưu hóa thành công'.

Chúc mừng! Phông chữ Google của bạn hiện được lưu trữ cục bộ. Trang web của bạn sẽ tải nhanh hơn và bạn đã giảm nguy cơ bị kiện ở châu Âu.

2. Phương pháp 2: Lưu trữ phông chữ cục bộ trong WordPress theo cách thủ công

Bạn cũng có thể lưu trữ phông chữ cục bộ mà không cần sử dụng plugin bằng cách sử dụng phương pháp @font-face từ hướng dẫn của chúng tôi về cách thêm phông chữ tùy chỉnh trong WordPress. Mặc dù phương pháp này đòi hỏi nhiều công việc hơn, nhưng nó cho phép bạn sử dụng bất kỳ phông chữ nào bạn thích trên trang web của mình.

Bạn cần tải xuống các phông chữ bạn muốn sử dụng ở định dạng web. Có nhiều nơi để tìm phông chữ web miễn phí tuyệt vời, chẳng hạn như Google Fonts, Typekit, FontSquirrel, v.v.


Nếu bạn không có định dạng web cho phông chữ của mình thì bạn có thể chuyển đổi nó bằng cách sử dụng trình  tạo FontSquirrel Webfont.

Bây giờ bạn cần lưu trữ phông chữ trên  máy chủ lưu trữ WordPress của mình . Bạn có thể tải tệp lên bằng FTP  hoặc bằng Trình quản lý tệp cPanel của máy chủ.

Bạn nên tạo một thư mục mới có tên là 'phông chữ' trong thư mục của giao diện hoặc giao diện  con của bạn và tải nó lên đó.


Khi bạn đã tải phông chữ lên, bạn cần tải phông chữ đó trong biểu định kiểu của giao diện bằng cách sử dụng CSS tùy chỉnh. Bạn có thể thêm mã trực tiếp vào tệp style.css của giao diện hoặc bằng cách sử dụng phần CSS bổ sung của tùy biến giao diện.

Bạn có thể làm điều đó bằng cách sử dụng quy tắc CSS3 @ font-face như sau:

@font-face {
    font-family: Arvo;
    src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
    font-weight: normal;
}
Đừng quên thay thế họ phông chữ và URL bằng họ phông chữ của riêng bạn.

Sau đó, bạn có thể sử dụng phông chữ đó ở bất kỳ đâu trong biểu định kiểu của giao diện hoặc phần CSS bổ sung của tùy biến giao diện. CSS bạn sử dụng sẽ phụ thuộc vào giao diện của bạn và nơi bạn muốn sử dụng phông chữ cục bộ. Đây là một ví dụ từ trang web demo của chúng tôi:
   
h1 {
font-family: Arvo, Arial, sans-serif;
}
Như bạn có thể thấy, tiêu đề của chúng tôi hiện đang sử dụng phông chữ Arvo được lưu trữ cục bộ.


Chúng tôi hy vọng hướng dẫn này đã giúp bạn tìm hiểu cách lưu trữ phông chữ cục bộ trong WordPress để trang web nhanh hơn. Bạn cũng có thể muốn tìm hiểu cách tăng lưu lượng truy cập blog của mình hoặc xem danh sách các plugin WordPress phải có để phát triển trang web của bạn.