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

3 giờ ago, WordPress Themes, Views
Thêm Google Web Fonts đúng cách WordPress

Thêm Google Web Fonts Đúng Cách Vào WordPress: Hướng Dẫn Chi Tiết

Giới Thiệu

Google Fonts là một thư viện khổng lồ chứa hàng ngàn font chữ miễn phí, chất lượng cao mà bạn có thể sử dụng cho trang web WordPress của mình. Việc sử dụng Google Fonts giúp cải thiện đáng kể tính thẩm mỹ và khả năng đọc của trang web, tạo ấn tượng tốt hơn cho người dùng. Tuy nhiên, việc thêm Google Fonts không đúng cách có thể ảnh hưởng tiêu cực đến tốc độ tải trang và hiệu suất tổng thể. Bài viết này sẽ hướng dẫn bạn chi tiết các phương pháp thêm Google Fonts vào WordPress một cách tối ưu, đảm bảo trang web của bạn vừa đẹp vừa nhanh.

Tại Sao Cần Thêm Google Fonts Đúng Cách?

Mặc dù Google Fonts mang lại nhiều lợi ích, nhưng việc lạm dụng hoặc thêm không đúng cách có thể gây ra các vấn đề sau:

  • Tăng thời gian tải trang: Mỗi font chữ bạn thêm vào đòi hỏi trình duyệt phải tải thêm một tệp tin. Nếu bạn sử dụng quá nhiều font chữ hoặc font chữ có dung lượng lớn, thời gian tải trang sẽ tăng lên đáng kể.
  • Block Rendering: Trình duyệt có thể chặn hiển thị trang web cho đến khi tất cả các font chữ đã được tải xong, gây ra trải nghiệm người dùng không tốt (Flash of Invisible Text – FOIT).
  • Ảnh hưởng đến Core Web Vitals: Việc sử dụng font chữ không tối ưu có thể ảnh hưởng đến các chỉ số Core Web Vitals của Google, đặc biệt là Largest Contentful Paint (LCP).

Vì vậy, việc lựa chọn font chữ phù hợp và thêm chúng vào WordPress một cách thông minh là rất quan trọng.

Các Phương Pháp Thêm Google Fonts Vào WordPress

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

1. Thêm Google Fonts Bằng Cách Thủ Công (Sử Dụng functions.php)

Đây là phương pháp kiểm soát tốt nhất và được khuyến khích cho những người có kiến thức về lập trình WordPress.

  1. Chọn Font Chữ Trên Google Fonts: Truy cập trang Google Fonts và chọn font chữ bạn muốn sử dụng. Chọn các kiểu chữ (weights) cần thiết (ví dụ: Regular 400, Bold 700).
  2. Lấy Đường Dẫn Font Chữ: Google Fonts sẽ cung cấp cho bạn một đoạn code HTML để nhúng font chữ. Copy đoạn code này. Ví dụ: 
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  3. Thêm Code Vào functions.php: Mở tệp functions.php của theme con (child theme) của bạn. Nếu bạn không có theme con, hãy tạo một theme con để tránh mất các tùy chỉnh khi cập nhật theme chính. Thêm đoạn code sau vào tệp functions.php: 
    function them_google_fonts() {
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'them_google_fonts' );

    Thay thế đường dẫn https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap bằng đường dẫn font chữ bạn đã copy ở bước 2.

  4. Sử Dụng Font Chữ Trong CSS: Sau khi đã thêm font chữ, bạn có thể sử dụng nó trong CSS của mình. Ví dụ: 
    body {
    font-family: 'Roboto', sans-serif;
}

2. Sử Dụng Plugin WordPress

Có rất nhiều plugin WordPress giúp bạn dễ dàng thêm Google Fonts vào trang web của mình mà không cần viết code. Một số plugin phổ biến bao gồm:

  • Easy Google Fonts: Plugin này cho phép bạn dễ dàng tùy chỉnh font chữ cho các phần tử khác nhau trên trang web của bạn thông qua giao diện trực quan.
  • Google Fonts Typography: Một plugin đơn giản để thêm Google Fonts vào WordPress.
  • Use Any Font: Plugin này không chỉ cho phép bạn sử dụng Google Fonts mà còn cho phép bạn tải lên các font chữ tùy chỉnh của riêng mình.

Để sử dụng plugin, bạn chỉ cần cài đặt và kích hoạt plugin, sau đó làm theo hướng dẫn của plugin để chọn và tùy chỉnh font chữ.

3. Sử Dụng Theme Options (Nếu Có)

Một số theme WordPress đã tích hợp sẵn tính năng cho phép bạn chọn Google Fonts từ bảng điều khiển theme. Nếu theme của bạn có tính năng này, bạn có thể sử dụng nó để thêm Google Fonts một cách dễ dàng.

Để tìm hiểu xem theme của bạn có hỗ trợ tính năng này hay không, hãy kiểm tra tài liệu của theme hoặc tìm trong bảng điều khiển theme các tùy chọn liên quan đến typography hoặc font chữ.

Tối Ưu Hóa Google Fonts Để Cải Thiện Hiệu Suất

Sau khi đã thêm Google Fonts vào WordPress, bạn cần tối ưu hóa chúng để đảm bảo hiệu suất trang web tốt nhất. Dưới đây là một số mẹo tối ưu hóa:

  • Chỉ Sử Dụng Các Kiểu Chữ (Weights) Cần Thiết: Chỉ chọn các kiểu chữ mà bạn thực sự sử dụng. Việc tải tất cả các kiểu chữ (ví dụ: Thin 100, ExtraLight 200, Light 300, Regular 400, Medium 500, SemiBold 600, Bold 700, ExtraBold 800, Black 900) sẽ làm tăng đáng kể kích thước tệp tin font chữ.
  • Sử Dụng font-display: swap;: Thêm thuộc tính font-display: swap; vào thẻ <link> hoặc trong CSS để trình duyệt hiển thị văn bản bằng font chữ hệ thống trước khi font chữ Google được tải xong, giúp tránh tình trạng Flash of Invisible Text (FOIT).
  • Preconnect to Google Fonts: Sử dụng <link rel="preconnect"> để thiết lập kết nối sớm đến máy chủ Google Fonts, giúp giảm thời gian tải font chữ.
  • Tự Hosting Font Chữ: Thay vì tải font chữ từ máy chủ Google, bạn có thể tải xuống font chữ và lưu trữ chúng trên máy chủ của mình. Điều này có thể cải thiện tốc độ tải trang và giúp bạn kiểm soát tốt hơn quá trình tải font chữ.

Ví dụ về việc sử dụng font-display: swap; khi thêm font chữ thủ công:

function them_google_fonts() {
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'them_google_fonts' );

Hoặc trong CSS:

@font-face {
  font-family: 'Roboto';
  src: url('roboto-regular.woff2') format('woff2'),
       url('roboto-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Lựa Chọn Font Chữ Phù Hợp

Việc lựa chọn font chữ phù hợp là rất quan trọng để đảm bảo trang web của bạn trông đẹp mắt và chuyên nghiệp. Dưới đây là một số lưu ý khi chọn font chữ:

  • Tính Dễ Đọc: Chọn font chữ dễ đọc, đặc biệt là cho nội dung chính của trang web.
  • Phù Hợp Với Thương Hiệu: Chọn font chữ phù hợp với phong cách và thông điệp của thương hiệu của bạn.
  • Sử Dụng Ít Font Chữ: Hạn chế sử dụng quá nhiều font chữ trên một trang web. Thường thì chỉ cần 2-3 font chữ là đủ.

Kiểm Tra Tốc Độ Tải Trang

Sau khi đã thêm và tối ưu hóa Google Fonts, hãy kiểm tra tốc độ tải trang của bạn bằng các công cụ như Google PageSpeed Insights, GTmetrix hoặc WebPageTest. Điều này sẽ giúp bạn xác định xem việc sử dụng Google Fonts có ảnh hưởng đến hiệu suất trang web của bạn hay không, và thực hiện các điều chỉnh cần thiết.

Kết Luận

Việc thêm Google Fonts vào WordPress có thể cải thiện đáng kể giao diện và trải nghiệm người dùng trên trang web của bạn. Tuy nhiên, việc thực hiện đúng cách và tối ưu hóa là rất quan trọng để đảm bảo hiệu suất trang web tốt nhất. Bằng cách làm theo các hướng dẫn trong bài viết này, bạn có thể thêm Google Fonts vào WordPress một cách hiệu quả và đảm bảo trang web của bạn vừa đẹp vừa nhanh.

Related Topics by Tag
, , , ,

..