5 cách thay đổi font chữ trong theme WordPress

22 giờ ago, Hướng dẫn WordPress, Views
5 cách thay đổi font chữ trong theme WordPress

5 Cách Thay Đổi Font Chữ Trong Theme WordPress

Font chữ đóng vai trò quan trọng trong việc tạo dựng diện mạo trực quan và trải nghiệm người dùng cho website WordPress của bạn. Một font chữ phù hợp có thể cải thiện khả năng đọc, tăng tính thẩm mỹ và củng cố nhận diện thương hiệu. Tuy nhiên, việc thay đổi font chữ trong WordPress có thể là một thử thách đối với người mới bắt đầu. Bài viết này sẽ hướng dẫn bạn qua 5 cách đơn giản và hiệu quả để thay đổi font chữ trong theme WordPress của bạn.

1. Sử Dụng Customizer WordPress

WordPress Customizer là một công cụ trực quan cho phép bạn tùy chỉnh giao diện website một cách dễ dàng, bao gồm cả việc thay đổi font chữ. Đây là cách đơn giản nhất và được khuyến nghị cho người mới bắt đầu.

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

  1. Truy cập Giao diện > Tùy biến (Appearance > Customize) trong bảng điều khiển WordPress.
  2. Tìm mục liên quan đến typography (Kiểu chữ), thường có tên như “Typography”, “Font Settings”, “Colors & Fonts”,… Tên có thể khác nhau tùy thuộc vào theme bạn đang sử dụng.
  3. Trong mục này, bạn sẽ thấy các tùy chọn để chọn font chữ cho các thành phần khác nhau của website như tiêu đề, nội dung, menu,…
  4. Chọn font chữ bạn muốn từ danh sách có sẵn. Nhiều theme tích hợp thư viện Google Fonts cho phép bạn lựa chọn từ hàng trăm font chữ miễn phí.
  5. Điều chỉnh kích thước, độ đậm, kiểu chữ (in nghiêng) và các thuộc tính khác của font chữ.
  6. Xem trước thay đổi trực tiếp trên cửa sổ tùy biến.
  7. Nhấn nút Đăng (Publish) để lưu lại các thay đổi.

Ưu điểm:

  • Dễ sử dụng, không cần kiến thức về code.
  • Xem trước thay đổi trực tiếp.
  • An toàn, không ảnh hưởng đến code của theme.

Nhược điểm:

  • Tùy chọn giới hạn tùy thuộc vào theme.
  • Không phải theme nào cũng có đầy đủ tùy chọn font chữ.

2. Sử Dụng Plugin Thay Đổi Font Chữ

Nếu theme của bạn không cung cấp đủ tùy chọn font chữ trong Customizer, bạn có thể sử dụng plugin. Có rất nhiều plugin miễn phí và trả phí trên WordPress.org cho phép bạn dễ dàng thay đổi font chữ trên toàn bộ website hoặc cho từng thành phần cụ thể.

Một số plugin phổ biến:

  • Easy Google Fonts: Cho phép bạn tích hợp và sử dụng Google Fonts một cách dễ dàng.
  • Use Any Font: Cho phép bạn tải lên và sử dụng font chữ tùy chỉnh từ máy tính của bạn.
  • Font Awesome: Cung cấp thư viện các biểu tượng vector có thể tùy chỉnh kích thước và màu sắc. Mặc dù không phải là plugin thay đổi font chữ thông thường, nhưng nó bổ sung thêm các biểu tượng để làm phong phú giao diện.

Các bước thực hiện (ví dụ với Easy Google Fonts):

  1. Cài đặt và kích hoạt plugin Easy Google Fonts.
  2. Truy cập Giao diện > Tùy biến (Appearance > Customize).
  3. Tìm mục “Typography” hoặc một mục tương tự do plugin tạo ra.
  4. Chọn font chữ từ danh sách Google Fonts.
  5. Tùy chỉnh các thuộc tính của font chữ như kích thước, độ đậm,…
  6. Xem trước thay đổi và nhấn Đăng (Publish) để lưu lại.

Ưu điểm:

  • Nhiều tùy chọn font chữ hơn so với Customizer.
  • Dễ dàng tùy chỉnh font chữ cho nhiều thành phần khác nhau.
  • Một số plugin hỗ trợ tải lên font chữ tùy chỉnh.

Nhược điểm:

  • Có thể ảnh hưởng đến tốc độ tải trang nếu sử dụng quá nhiều font chữ.
  • Cần chọn plugin uy tín để đảm bảo an toàn và hiệu suất.

3. Thay Đổi Font Chữ Bằng CSS

Nếu bạn có kiến thức về CSS, bạn có thể thay đổi font chữ trực tiếp bằng cách chỉnh sửa file CSS của theme. Đây là phương pháp linh hoạt nhất, cho phép bạn kiểm soát hoàn toàn kiểu chữ trên website.

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

  1. Xác định class hoặc ID CSS của phần tử bạn muốn thay đổi font chữ. Bạn có thể sử dụng Developer Tools trong trình duyệt (nhấn F12) để kiểm tra mã HTML và CSS của trang web.
  2. Truy cập file CSS của theme. Có hai cách để thực hiện:
    • Sử dụng trình chỉnh sửa CSS trong Customizer: Truy cập Giao diện > Tùy biến > CSS bổ sung (Appearance > Customize > Additional CSS).
    • Chỉnh sửa trực tiếp file style.css của theme: Truy cập Giao diện > Theme Editor (Appearance > Theme Editor). Tuy nhiên, cách này không được khuyến khích vì các thay đổi sẽ bị mất khi theme được cập nhật. Bạn nên sử dụng child theme để tránh mất các tùy chỉnh.
  3. Thêm CSS code để thay đổi font chữ. Ví dụ: 
    body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
}
  4. Lưu lại các thay đổi.

Giải thích code:

  • font-family: Xác định font chữ. Bạn có thể sử dụng tên font chữ có sẵn (ví dụ: Arial, Times New Roman) hoặc tên font chữ từ Google Fonts (ví dụ: Roboto, Open Sans). Nếu font chữ đầu tiên không có sẵn, trình duyệt sẽ thử sử dụng các font chữ tiếp theo trong danh sách.
  • font-size: Xác định kích thước font chữ.
  • line-height: Xác định khoảng cách giữa các dòng.
  • font-weight: Xác định độ đậm của font chữ (ví dụ: bold, normal).

Ưu điểm:

  • Linh hoạt, cho phép kiểm soát hoàn toàn kiểu chữ.
  • Không cần cài đặt plugin.

Nhược điểm:

  • Yêu cầu kiến thức về CSS.
  • Có thể gây lỗi nếu code CSS không chính xác.
  • Thay đổi trực tiếp file theme có thể bị mất khi cập nhật theme (nên sử dụng child theme).

4. Sử Dụng Child Theme

Khi bạn muốn tùy chỉnh theme WordPress của mình, đặc biệt là chỉnh sửa trực tiếp các file theme, việc sử dụng child theme là rất quan trọng. Child theme là một theme con kế thừa tất cả các chức năng và thiết kế của theme mẹ (parent theme). Khi bạn thực hiện thay đổi trên child theme, các thay đổi này sẽ không bị mất khi theme mẹ được cập nhật. Điều này đảm bảo rằng các tùy chỉnh của bạn sẽ được giữ nguyên và website của bạn sẽ luôn hoạt động ổn định.

Lý do nên sử dụng Child Theme khi thay đổi font chữ bằng CSS:

  • Bảo vệ tùy chỉnh: Các thay đổi bạn thực hiện trên child theme sẽ không bị ghi đè khi theme mẹ được cập nhật.
  • Dễ dàng quản lý: Bạn có thể dễ dàng theo dõi và quản lý các tùy chỉnh của mình trên child theme.
  • An toàn: Nếu có lỗi xảy ra, bạn có thể dễ dàng vô hiệu hóa child theme để khôi phục lại theme mẹ.

Cách tạo Child Theme:

  1. Tạo một thư mục mới trong thư mục wp-content/themes/. Tên thư mục thường có dạng [tên-theme-mẹ]-child (ví dụ: twentytwentyone-child).
  2. Tạo một file style.css trong thư mục child theme và thêm đoạn code sau: 
    /*
 Theme Name:   [Tên Child Theme]
 Theme URI:    [URL Child Theme]
 Description:  Child theme for [Tên Theme Mẹ] theme
 Author:       [Tên của bạn]
 Author URI:   [URL trang web của bạn]
 Template:     [Tên thư mục của theme mẹ]
 Version:      1.0.0
*/

@import url("../[tên thư mục của theme mẹ]/style.css");

/*
 Thêm CSS code tùy chỉnh của bạn vào đây
*/

    Thay thế các thông tin trong dấu ngoặc vuông bằng thông tin thực tế. Đặc biệt, Template phải chứa tên thư mục của theme mẹ (ví dụ: twentytwentyone).

  3. Kích hoạt child theme trong Giao diện > Giao diện (Appearance > Themes).

Sau khi kích hoạt child theme, bạn có thể chỉnh sửa file style.css trong child theme để thay đổi font chữ như đã hướng dẫn ở phần 3.

5. Sử Dụng Page Builder

Một số Page Builder phổ biến như Elementor, Beaver Builder, Divi Builder,… cung cấp các tùy chọn trực quan để thay đổi font chữ cho từng thành phần trên trang web. Đây là phương pháp phù hợp nếu bạn muốn tùy chỉnh font chữ cho từng trang hoặc bài viết cụ thể.

Các bước thực hiện (ví dụ với Elementor):

  1. Chỉnh sửa trang hoặc bài viết bằng Elementor.
  2. Chọn thành phần bạn muốn thay đổi font chữ (ví dụ: tiêu đề, đoạn văn bản).
  3. Trong bảng điều khiển Elementor, tìm mục “Style” (Kiểu).
  4. Tìm các tùy chọn liên quan đến Typography (Kiểu chữ) như “Font Family”, “Size”, “Weight”, “Transform”, “Style”, “Decoration”, “Line Height”, “Letter Spacing”.
  5. Chọn font chữ và tùy chỉnh các thuộc tính khác.
  6. Cập nhật trang hoặc bài viết để lưu lại các thay đổi.

Ưu điểm:

  • Tùy chỉnh font chữ cho từng trang hoặc bài viết cụ thể.
  • Giao diện trực quan, dễ sử dụng.

Nhược điểm:

  • Yêu cầu sử dụng Page Builder.
  • Có thể ảnh hưởng đến tốc độ tải trang nếu sử dụng quá nhiều font chữ và hiệu ứng.

Kết luận

Việc thay đổi font chữ trong theme WordPress có thể được thực hiện bằng nhiều cách khác nhau, từ đơn giản đến phức tạp. Tùy thuộc vào kiến thức kỹ thuật và nhu cầu của bạn, bạn có thể lựa chọn phương pháp phù hợp nhất. Hãy thử nghiệm và tìm ra font chữ phù hợp nhất để tạo ra một website đẹp mắt và chuyên nghiệp.

, , , ,

..