Cách thêm font tùy chỉnh trong WordPress

6 tháng ago, WordPress Themes, 1 Views
Cách thêm font tùy chỉnh trong WordPress

Giới thiệu về việc thêm font tùy chỉnh vào WordPress

Việc sử dụng font chữ tùy chỉnh có thể giúp website WordPress của bạn trở nên độc đáo và chuyên nghiệp hơn. Font chữ là một yếu tố quan trọng trong việc xây dựng thương hiệu và tạo ấn tượng cho người dùng. WordPress mặc định cung cấp một số font chữ cơ bản, nhưng bạn hoàn toàn có thể mở rộng lựa chọn bằng cách thêm font tùy chỉnh. Bài viết này sẽ hướng dẫn bạn các phương pháp khác nhau để thêm font tùy chỉnh vào website WordPress của mình.

Tại sao nên sử dụng font tùy chỉnh?

Việc sử dụng font tùy chỉnh mang lại nhiều lợi ích cho website của bạn:

  • Tăng tính thẩm mỹ và chuyên nghiệp: Font chữ phù hợp có thể làm cho website trông đẹp mắt và chuyên nghiệp hơn.
  • Xây dựng thương hiệu: Sử dụng font chữ độc đáo có thể giúp bạn xây dựng và củng cố thương hiệu của mình.
  • Cải thiện trải nghiệm người dùng: Lựa chọn font chữ dễ đọc và phù hợp với nội dung sẽ giúp người dùng dễ dàng tiếp nhận thông tin hơn.
  • Nổi bật so với đối thủ: Sử dụng font chữ khác biệt có thể giúp bạn tạo sự khác biệt và nổi bật so với các website khác.

Các phương pháp thêm font tùy chỉnh vào WordPress

Có nhiều cách để thêm font tùy chỉnh vào WordPress, mỗi cách 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
  2. Thêm code vào file functions.php
  3. Sử dụng child theme và thêm code vào CSS
  4. Sử dụng Google Fonts

Sử dụng plugin để thêm font tùy chỉnh

Đây là phương pháp đơn giản và dễ thực hiện nhất, đặc biệt phù hợp cho người mới bắt đầu. Có rất nhiều plugin miễn phí và trả phí có thể giúp bạn thêm font tùy chỉnh vào WordPress một cách dễ dàng.

Ví dụ về plugin: Easy Google Fonts

Plugin Easy Google Fonts cho phép bạn dễ dàng sử dụng các font chữ từ Google Fonts mà không cần code. Plugin này tích hợp trực tiếp vào WordPress Customizer, giúp bạn dễ dàng xem trước và tùy chỉnh font chữ cho các phần khác nhau của website.

Cách sử dụng Easy Google Fonts:

  1. Cài đặt và kích hoạt plugin Easy Google Fonts.
  2. Truy cập Appearance -> Customize.
  3. Tìm và chọn phần “Typography” hoặc “Google Fonts”.
  4. Chọn các yếu tố bạn muốn thay đổi font chữ (ví dụ: Body, Headers).
  5. Chọn font chữ mong muốn từ danh sách.
  6. Điều chỉnh các tùy chọn khác như kích thước, độ đậm, v.v.
  7. Nhấn “Publish” để lưu thay đổi.

Ưu điểm của việc sử dụng plugin:

  • Dễ dàng cài đặt và sử dụng.
  • Không cần kiến thức về code.
  • Thường có giao diện trực quan để tùy chỉnh.

Nhược điểm của việc sử dụng plugin:

  • Có thể làm chậm website nếu sử dụng quá nhiều plugin.
  • Một số plugin có thể không tương thích với theme của bạn.
  • Một số plugin có thể không được cập nhật thường xuyên.

Thêm code vào file functions.php

Phương pháp này yêu cầu bạn có kiến thức cơ bản về code PHP. Bạn sẽ cần chỉnh sửa file functions.php của theme để thêm code tải font chữ tùy chỉnh.

Ví dụ về code:


function add_custom_fonts() {
  wp_enqueue_style( 'custom-fonts', get_stylesheet_directory_uri() . '/fonts/my-custom-font.css' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_fonts' );

Trong ví dụ trên, bạn cần thay thế “/fonts/my-custom-font.css” bằng đường dẫn thực tế đến file CSS chứa định nghĩa font chữ của bạn. Bạn cũng cần tải lên file font chữ (ví dụ: .woff, .woff2, .ttf) vào thư mục “fonts” trong theme của bạn.

Ưu điểm của việc thêm code vào functions.php:

  • Kiểm soát hoàn toàn quá trình tải font chữ.
  • Không cần sử dụng plugin, giảm tải cho website.

Nhược điểm của việc thêm code vào functions.php:

  • Yêu cầu kiến thức về code PHP.
  • Có thể gây lỗi cho website nếu code không chính xác.
  • Cần cẩn thận khi cập nhật theme, vì các thay đổi trong file functions.php có thể bị mất.

Sử dụng child theme và thêm code vào CSS

Đây là phương pháp an toàn hơn so với việc chỉnh sửa trực tiếp file functions.php của theme gốc. Child theme là một theme con kế thừa tất cả các tính năng của theme gốc, nhưng cho phép bạn tùy chỉnh mà không ảnh hưởng đến theme gốc.

Cách tạo child theme:

  1. Tạo một thư mục mới trong thư mục “wp-content/themes”. Đặt tên thư mục theo cấu trúc: “ten-theme-goc-child” (ví dụ: “twentytwentyone-child”).
  2. Tạo một file style.css trong thư mục child theme.
  3. Thêm đoạn code sau vào file style.css:

/*
 Theme Name:   Twenty Twenty-One Child
 Theme URI:    http://example.com/twenty-twenty-one-child/
 Description:  Twenty Twenty-One Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentytwentyone
 Version:      1.0.0
*/

@import url('../twentytwentyone/style.css');

/*
 Add your custom CSS here
*/

Thay thế “Twenty Twenty-One” bằng tên theme gốc của bạn.

Cách thêm font tùy chỉnh vào child theme:

  1. Tải lên file font chữ vào thư mục child theme (ví dụ: “wp-content/themes/twentytwentyone-child/fonts”).
  2. Tạo một file CSS (ví dụ: “custom-fonts.css”) trong thư mục child theme và thêm định nghĩa font chữ vào file này.
  3. Trong file functions.php của child theme, thêm đoạn code sau:

function add_custom_fonts() {
  wp_enqueue_style( 'custom-fonts', get_stylesheet_directory_uri() . '/custom-fonts.css' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_fonts' );

Đảm bảo rằng bạn đã kích hoạt child theme trong WordPress.

Ưu điểm của việc sử dụng child theme:

  • An toàn khi cập nhật theme gốc, vì các thay đổi của bạn sẽ không bị mất.
  • Cho phép bạn tùy chỉnh website mà không ảnh hưởng đến theme gốc.
  • Dễ dàng quản lý và bảo trì.

Nhược điểm của việc sử dụng child theme:

  • Yêu cầu một chút kiến thức về cấu trúc theme của WordPress.
  • Cần tạo và quản lý thêm một theme con.

Sử dụng Google Fonts

Google Fonts là một thư viện font chữ miễn phí và chất lượng cao. Bạn có thể dễ dàng sử dụng Google Fonts trên website WordPress của mình.

Cách sử dụng Google Fonts:

  1. Truy cập website Google Fonts: https://fonts.google.com/
  2. Chọn font chữ bạn muốn sử dụng.
  3. Nhấn vào nút “+” để thêm font chữ vào danh sách lựa chọn của bạn.
  4. Mở danh sách lựa chọn và copy đoạn code HTML hoặc CSS được cung cấp.
  5. Thêm đoạn code HTML vào file header.php của theme (giữa thẻ <head> và </head>) hoặc thêm đoạn code CSS vào file style.css của theme.
  6. Sử dụng font chữ trong CSS của bạn.

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


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

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
}

Ưu điểm của việc sử dụng Google Fonts:

  • Miễn phí và dễ sử dụng.
  • Có nhiều font chữ đẹp và chất lượng cao.
  • Font chữ được tối ưu hóa cho web, giúp website tải nhanh hơn.

Nhược điểm của việc sử dụng Google Fonts:

  • Phụ thuộc vào kết nối internet để tải font chữ.
  • Có thể ảnh hưởng đến quyền riêng tư của người dùng (mặc dù Google đã cải thiện vấn đề này).

Lời khuyên khi chọn font tùy chỉnh

Khi chọn font tùy chỉnh cho website của bạn, hãy xem xét các yếu tố sau:

  • Khả năng đọc: Chọn font chữ dễ đọc, đặc biệt là cho nội dung chính của website.
  • Tính nhất quán: Sử dụng một số lượng font chữ hạn chế (thường là 2-3 font) để đảm bảo tính nhất quán cho website.
  • Khả năng tương thích: Đảm bảo rằng font chữ tương thích với các trình duyệt và thiết bị khác nhau.
  • Phong cách: Chọn font chữ phù hợp với phong cách và thương hiệu của bạn.
  • Hiệu suất: Chọn font chữ đã được tối ưu hóa cho web để đảm bảo website tải nhanh.

Kết luận

Việc thêm font tùy chỉnh vào WordPress có thể giúp website của bạn trở nên độc đáo và chuyên nghiệp hơn. Hãy lựa chọn phương pháp phù hợp với kỹ năng và nhu cầu của bạn. Đừng quên kiểm tra kỹ lưỡng font chữ trên các trình duyệt và thiết bị khác nhau để đảm bảo trải nghiệm tốt nhất cho người dùng.

Related Topics by Tag
, , , ,

..