Thêm Google Web Fonts đúng cách WordPress

6 tháng ago, WordPress Themes, Views
Thêm Google Web Fonts đúng cách WordPress

Giới thiệu về Google Web Fonts và WordPress

Google Web Fonts (còn được gọi là Google Fonts) là một thư viện trực tuyến miễn phí chứa hàng trăm phông chữ đẹp mắt và dễ sử dụng. Việc sử dụng Google Fonts trên trang web WordPress của bạn có thể cải thiện đáng kể tính thẩm mỹ và khả năng đọc của trang, mang lại trải nghiệm tốt hơn cho người dùng.

WordPress là một nền tảng quản lý nội dung (CMS) phổ biến, cho phép bạn dễ dàng tạo và quản lý trang web của mình. Tuy nhiên, việc thêm Google Fonts vào WordPress một cách không chính xác có thể ảnh hưởng đến hiệu suất trang web, đặc biệt là tốc độ tải trang. Bài viết này sẽ hướng dẫn bạn cách thêm Google Web Fonts vào WordPress một cách đúng đắn và hiệu quả.

Tại sao nên sử dụng Google Web Fonts trên WordPress?

Có nhiều lý do để sử dụng Google Web Fonts trên trang web WordPress của bạn:

  • Cải thiện tính thẩm mỹ: Google Fonts cung cấp nhiều lựa chọn phông chữ khác nhau, giúp bạn tạo ra một trang web có thiết kế độc đáo và chuyên nghiệp.
  • Tăng khả năng đọc: Việc sử dụng phông chữ phù hợp có thể cải thiện khả năng đọc của nội dung, giúp người dùng dễ dàng tiếp thu thông tin hơn.
  • Miễn phí và dễ sử dụng: Google Fonts hoàn toàn miễn phí và dễ dàng tích hợp vào trang web WordPress của bạn.
  • Tương thích với nhiều trình duyệt: Google Fonts tương thích với hầu hết các trình duyệt web hiện đại.
  • Cải thiện SEO: Việc sử dụng phông chữ được tối ưu hóa có thể giúp cải thiện thứ hạng SEO của trang web.

Các phương pháp thêm Google Web Fonts vào WordPress

Có nhiều phương pháp khác nhau để thêm Google Web Fonts vào WordPress, mỗi phương pháp có ưu và nhược điểm riêng. Dưới đây là một số phương pháp phổ biến:

  1. Sử dụng plugin: Đây là phương pháp đơn giản nhất, phù hợp với người dùng không có nhiều kiến thức về code.
  2. Chỉnh sửa file functions.php của theme: Phương pháp này đòi hỏi một chút kiến thức về code, nhưng cho phép bạn kiểm soát nhiều hơn việc tải phông chữ.
  3. Thêm code vào file header.php của theme: Phương pháp này tương tự như chỉnh sửa functions.php, nhưng thường không được khuyến khích.
  4. Sử dụng CSS: Bạn có thể thêm Google Fonts trực tiếp vào file CSS của theme hoặc thông qua trình tùy biến WordPress.

Phương pháp 1: Sử dụng plugin

Đây là phương pháp đơn giản và được khuyến khích cho người mới bắt đầu. Có rất nhiều plugin miễn phí và trả phí cho phép bạn dễ dàng thêm Google Fonts vào WordPress. Một số plugin phổ biến bao gồm:

  • Easy Google Fonts: Plugin này cho phép bạn tùy chỉnh phông chữ cho các phần tử khác nhau của trang web, như tiêu đề, nội dung, menu, v.v.
  • Google Fonts Typography: Plugin này cung cấp nhiều lựa chọn phông chữ và tùy chỉnh nâng cao.
  • Use Google Fonts: Plugin đơn giản và dễ sử dụng, cho phép bạn chọn phông chữ và áp dụng chúng cho toàn bộ trang web.

Hướng dẫn sử dụng plugin Easy Google Fonts:

  1. Cài đặt và kích hoạt plugin Easy Google Fonts.
  2. Vào Appearance > Customize > Typography.
  3. Chọn phần tử bạn muốn thay đổi phông chữ (ví dụ: “Base”).
  4. Chọn phông chữ bạn muốn sử dụng từ danh sách Google Fonts.
  5. Tùy chỉnh kích thước, màu sắc và các thuộc tính khác của phông chữ.
  6. Nhấn Publish để lưu các thay đổi.

Phương pháp 2: Chỉnh sửa file functions.php của theme

Phương pháp này cho phép bạn kiểm soát nhiều hơn việc tải phông chữ. Tuy nhiên, bạn cần cẩn thận khi chỉnh sửa file functions.php, vì một lỗi nhỏ có thể khiến trang web của bạn bị lỗi.

Lưu ý quan trọng: Trước khi chỉnh sửa bất kỳ file nào của theme, hãy tạo một bản sao lưu để phòng trường hợp có sự cố xảy ra.

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

  1. Truy cập vào file functions.php của theme của bạn thông qua FTP hoặc trình quản lý file của hosting.
  2. Thêm đoạn code sau vào file functions.php:

function theme_add_google_fonts() {
  wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap', false );
}
add_action( 'wp_enqueue_scripts', 'theme_add_google_fonts' );

Giải thích code:

  • theme_add_google_fonts(): Đây là tên của hàm. Bạn có thể thay đổi tên này nếu muốn.
  • wp_enqueue_style(): Hàm này được sử dụng để tải một file CSS vào trang web.
  • 'google-fonts': Đây là tên của style sheet. Bạn có thể thay đổi tên này nếu muốn.
  • 'https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap': Đây là URL của file CSS chứa phông chữ Google. Bạn cần thay đổi URL này để phù hợp với phông chữ bạn muốn sử dụng. Ví dụ, nếu bạn muốn sử dụng phông chữ Roboto với các biến thể 400 và 700. &display=swap báo cho trình duyệt hiển thị văn bản bằng phông chữ hệ thống trước khi Google Font được tải, cải thiện trải nghiệm người dùng.
  • false: Tham số này cho biết file CSS không phụ thuộc vào bất kỳ file CSS nào khác.
  • add_action( 'wp_enqueue_scripts', 'theme_add_google_fonts' ): Hàm này được sử dụng để gọi hàm theme_add_google_fonts() khi WordPress tải các script và style sheet.
  1. Thay thế Roboto:400,700 bằng tên phông chữ và các biến thể bạn muốn sử dụng. Ví dụ: Open+Sans:400,600,700.
  2. Lưu file functions.php.
  3. Sau đó, bạn có thể sử dụng phông chữ này trong CSS của theme bằng cách thêm thuộc tính font-family:

body {
  font-family: 'Roboto', sans-serif;
}

Phương pháp 3: Thêm code vào file header.php của theme

Phương pháp này tương tự như chỉnh sửa functions.php, nhưng thường không được khuyến khích vì nó có thể làm cho file header.php trở nên lộn xộn và khó quản lý.

Nếu bạn vẫn muốn sử dụng phương pháp này, hãy thêm đoạn code sau vào file header.php:


<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap">

Nhớ thay thế Roboto:400,700 bằng tên phông chữ và các biến thể bạn muốn sử dụng.

Phương pháp 4: Sử dụng CSS

Bạn có thể thêm Google Fonts trực tiếp vào file CSS của theme hoặc thông qua trình tùy biến WordPress.

Thêm vào file CSS:

  1. Truy cập vào file CSS của theme (thường là style.css) thông qua FTP hoặc trình quản lý file của hosting.
  2. Thêm đoạn code sau vào đầu file CSS:

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

Nhớ thay thế Roboto:400,700 bằng tên phông chữ và các biến thể bạn muốn sử dụng.

  1. Sau đó, bạn có thể sử dụng phông chữ này trong CSS của theme bằng cách thêm thuộc tính font-family:

body {
  font-family: 'Roboto', sans-serif;
}

Thêm thông qua trình tùy biến WordPress:

  1. Vào Appearance > Customize > Additional CSS.
  2. Thêm đoạn code sau vào ô CSS tùy chỉnh:

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

Nhớ thay thế Roboto:400,700 bằng tên phông chữ và các biến thể bạn muốn sử dụng.

Tối ưu hóa hiệu suất khi sử dụng Google Web Fonts

Việc sử dụng Google Web Fonts có thể ảnh hưởng đến hiệu suất trang web, đặc biệt là tốc độ tải trang. Để tối ưu hóa hiệu suất, bạn nên:

  • Chỉ sử dụng các phông chữ cần thiết: Không nên tải quá nhiều phông chữ, vì điều này có thể làm chậm tốc độ tải trang.
  • Chọn các biến thể phông chữ cần thiết: Chỉ tải các biến thể phông chữ (ví dụ: 400, 700) mà bạn thực sự sử dụng.
  • Sử dụng font-display: swap: Thuộc tính CSS này cho phép trình duyệt hiển thị văn bản bằng phông chữ hệ thống trước khi Google Font được tải, cải thiện trải nghiệm người dùng.
  • Tải phông chữ một cách bất đồng bộ (asynchronously): Điều này giúp trang web tải nhanh hơn, vì nó không phải chờ phông chữ được tải xong trước khi hiển thị nội dung.
  • Sử dụng CDN: CDN (Content Delivery Network) có thể giúp phân phối phông chữ nhanh hơn.

Kiểm tra kết quả

Sau khi thêm Google Web Fonts vào WordPress, hãy kiểm tra kỹ lưỡng trang web của bạn để đảm bảo phông chữ hiển thị đúng cách trên các trình duyệt và thiết bị khác nhau.

Bạn có thể sử dụng các công cụ như Google PageSpeed Insights để kiểm tra tốc độ tải trang và xác định các vấn đề có thể ảnh hưởng đến hiệu suất.

Kết luận

Việc thêm Google Web Fonts vào WordPress có thể cải thiện đáng kể tính thẩm mỹ và khả năng đọc của trang web của bạn. Tuy nhiên, bạn cần thực hiện đúng cách để đảm bảo hiệu suất trang web không bị ảnh hưởng. Hy vọng bài viết này đã cung cấp cho bạn những thông tin hữu ích để thêm Google Web Fonts vào WordPress một cách hiệu quả.

, , , ,

..