Vô hiệu hóa Google Fonts trên WordPress

4 tháng ago, WordPress Themes, Views
Vô hiệu hóa Google Fonts trên WordPress

Vô hiệu hóa Google Fonts trên WordPress: Hướng dẫn chi tiết

Google Fonts là một thư viện phông chữ trực tuyến khổng lồ, cho phép bạn dễ dàng sử dụng hàng trăm phông chữ đẹp mắt trên website WordPress của mình. Tuy nhiên, việc sử dụng Google Fonts cũng có thể gây ra một số vấn đề, bao gồm ảnh hưởng đến tốc độ tải trang, vấn đề về quyền riêng tư (GDPR), và thậm chí là vấn đề về hiệu suất overall của trang web. Bài viết này sẽ hướng dẫn bạn chi tiết cách vô hiệu hóa Google Fonts trên WordPress và các lựa chọn thay thế.

Tại sao nên vô hiệu hóa Google Fonts?

Có nhiều lý do khiến bạn cân nhắc vô hiệu hóa Google Fonts trên website WordPress của mình:

  • Tốc độ tải trang: Mỗi khi trình duyệt tải một trang web sử dụng Google Fonts, nó phải thực hiện một yêu cầu HTTP để tải các phông chữ này từ máy chủ của Google. Quá trình này có thể làm chậm thời gian tải trang, đặc biệt đối với người dùng có kết nối internet chậm.
  • Quyền riêng tư (GDPR): Việc tải Google Fonts từ máy chủ của Google có nghĩa là dữ liệu của người dùng (ví dụ: địa chỉ IP) có thể được chia sẻ với Google. Điều này có thể vi phạm các quy định về quyền riêng tư như GDPR nếu bạn không có sự đồng ý rõ ràng từ người dùng.
  • Hiệu suất website: Việc sử dụng quá nhiều phông chữ hoặc phông chữ có kích thước lớn có thể ảnh hưởng đến hiệu suất tổng thể của trang web, khiến trang web trở nên chậm chạp và kém phản hồi.

Các phương pháp vô hiệu hóa Google Fonts

Có nhiều phương pháp khác nhau để vô hiệu hóa Google Fonts trên WordPress, từ sử dụng plugin đến chỉnh sửa code trực tiếp. Dưới đây là một số phương pháp phổ biến và hiệu quả nhất:

1. Sử dụng Plugin để vô hiệu hóa Google Fonts

Đây là phương pháp đơn giản và dễ dàng nhất, đặc biệt phù hợp cho người dùng không quen thuộc với việc chỉnh sửa code. Có rất nhiều plugin miễn phí và trả phí có thể giúp bạn vô hiệu hóa Google Fonts một cách dễ dàng.

Ví dụ về một số plugin phổ biến:

  • Disable Google Fonts: Một plugin đơn giản và nhẹ nhàng, chỉ thực hiện đúng chức năng vô hiệu hóa Google Fonts.
  • Asset CleanUp: Page Speed Booster: Plugin này cho phép bạn quản lý tất cả các tài sản (CSS, JavaScript, Fonts) trên trang web của bạn, bao gồm cả việc vô hiệu hóa Google Fonts.
  • Perfmatters: Một plugin tối ưu hóa hiệu suất mạnh mẽ, bao gồm cả chức năng vô hiệu hóa Google Fonts và nhiều tính năng khác.

Hướng dẫn sử dụng plugin để vô hiệu hóa Google Fonts (ví dụ với Disable Google Fonts):

  1. Cài đặt và kích hoạt plugin “Disable Google Fonts”.
  2. Sau khi kích hoạt, plugin sẽ tự động vô hiệu hóa Google Fonts trên toàn bộ trang web của bạn. Bạn không cần cấu hình gì thêm.
  3. Để kiểm tra xem Google Fonts đã được vô hiệu hóa hay chưa, bạn có thể sử dụng các công cụ kiểm tra tốc độ trang web như Google PageSpeed Insights hoặc GTmetrix.

2. Chỉnh sửa code (functions.php) để vô hiệu hóa Google Fonts

Phương pháp này đòi hỏi bạn phải có kiến thức về code WordPress và quen thuộc với việc chỉnh sửa file `functions.php` của theme. Tuy nhiên, đây là một phương pháp hiệu quả và cho phép bạn kiểm soát hoàn toàn quá trình vô hiệu hóa Google Fonts.

Các bước thực hiện:

  1. Sao lưu file `functions.php` của theme trước khi thực hiện bất kỳ chỉnh sửa nào. Điều này rất quan trọng để bạn có thể khôi phục lại file gốc nếu có bất kỳ vấn đề gì xảy ra.
  2. Truy cập vào file `functions.php` của theme thông qua trình chỉnh sửa theme trong WordPress Dashboard (Appearance -> Theme Editor) hoặc thông qua FTP.
  3. Thêm đoạn code sau vào cuối file `functions.php`: 
    
function remove_google_fonts() {
  wp_dequeue_style( 'your-theme-google-fonts' ); // Thay thế 'your-theme-google-fonts' bằng ID của style chứa Google Fonts
}
add_action( 'wp_enqueue_scripts', 'remove_google_fonts', 100 );
  4. Quan trọng: Thay thế `’your-theme-google-fonts’` bằng ID thực tế của style chứa Google Fonts. Bạn có thể tìm ID này bằng cách kiểm tra mã nguồn của trang web (Ctrl+U hoặc Command+Option+U) và tìm các thẻ “ chứa URL của Google Fonts.
  5. Lưu file `functions.php`.

Lưu ý: Phương pháp này chỉ hoạt động nếu theme của bạn sử dụng hàm `wp_enqueue_scripts` để đăng ký Google Fonts. Nếu theme của bạn sử dụng một phương pháp khác, bạn cần tìm cách loại bỏ Google Fonts theo phương pháp đó.

3. Sử dụng Child Theme để vô hiệu hóa Google Fonts

Việc chỉnh sửa trực tiếp file `functions.php` của theme chính có thể gây ra vấn đề khi bạn cập nhật theme, vì các thay đổi của bạn có thể bị ghi đè. Để tránh điều này, bạn nên sử dụng child theme.

Các bước thực hiện:

  1. Tạo một child theme cho theme bạn đang sử dụng.
  2. Sao chép file `functions.php` từ theme chính sang child theme.
  3. Thực hiện các bước chỉnh sửa code như đã hướng dẫn ở phần trước trong file `functions.php` của child theme.
  4. Kích hoạt child theme.

Bằng cách sử dụng child theme, bạn có thể đảm bảo rằng các thay đổi của bạn sẽ không bị ghi đè khi bạn cập nhật theme chính.

4. Vô hiệu hóa Google Fonts thông qua CSS

Một số theme cho phép bạn tùy chỉnh CSS. Bạn có thể sử dụng CSS để override các styles từ Google Fonts. Tuy nhiên, phương pháp này không thực sự “vô hiệu hóa” Google Fonts mà chỉ ẩn chúng. Tệp Google Fonts vẫn sẽ được tải xuống, do đó nó không giải quyết được vấn đề về tốc độ và quyền riêng tư một cách triệt để.

Ví dụ về cách sử dụng CSS để override Google Fonts:


body {
  font-family: Arial, sans-serif !important; /* Thay thế bằng font chữ bạn muốn sử dụng */
}

h1, h2, h3, h4, h5, h6 {
  font-family: Arial, sans-serif !important; /* Thay thế bằng font chữ bạn muốn sử dụng */
}

Bạn có thể thêm đoạn CSS này vào mục “Customize -> Additional CSS” trong WordPress Dashboard.

Lựa chọn thay thế cho Google Fonts

Sau khi vô hiệu hóa Google Fonts, bạn cần thay thế chúng bằng các phông chữ khác để đảm bảo trang web của bạn vẫn trông đẹp mắt và dễ đọc. Dưới đây là một số lựa chọn:

  • System Fonts: Sử dụng các phông chữ có sẵn trên hệ thống của người dùng (ví dụ: Arial, Helvetica, Times New Roman). Đây là một lựa chọn tốt để cải thiện tốc độ tải trang và đảm bảo tính nhất quán trên các thiết bị khác nhau.
  • Tải phông chữ cục bộ (Local Fonts): Tải các tệp phông chữ (TTF, OTF, WOFF, WOFF2) lên máy chủ của bạn và sử dụng CSS để chỉ định đường dẫn đến các tệp này. Điều này cho phép bạn kiểm soát hoàn toàn các phông chữ được sử dụng trên trang web của mình và tránh việc tải phông chữ từ máy chủ bên ngoài.
  • Sử dụng các dịch vụ CDN khác: Nếu bạn vẫn muốn sử dụng các phông chữ tùy chỉnh, bạn có thể sử dụng các dịch vụ CDN khác cung cấp phông chữ miễn phí và có hiệu suất tốt hơn Google Fonts. Tuy nhiên, hãy nhớ kiểm tra các điều khoản sử dụng và chính sách quyền riêng tư của các dịch vụ này trước khi sử dụng.

Kết luận

Việc vô hiệu hóa Google Fonts trên WordPress có thể mang lại nhiều lợi ích, bao gồm cải thiện tốc độ tải trang, tăng cường quyền riêng tư và nâng cao hiệu suất tổng thể của trang web. Bằng cách sử dụng một trong các phương pháp được trình bày trong bài viết này và lựa chọn các phông chữ thay thế phù hợp, bạn có thể tạo ra một trang web nhanh hơn, an toàn hơn và thân thiện hơn với người dùng.

Related Topics by Tag
, , , ,

..