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

2 tuần ago, WordPress Themes, 3 Views
Cách thêm font tùy chỉnh trong WordPress

Cách Thêm Font Tùy Chỉnh vào WordPress: Hướng Dẫn Chi Tiết

WordPress, nền tảng quản lý nội dung (CMS) phổ biến nhất thế giới, cung cấp vô số tùy chọn tùy chỉnh để tạo ra một trang web độc đáo và phù hợp với thương hiệu của bạn. Một trong những yếu tố quan trọng để tạo dấu ấn riêng là sử dụng font chữ. Mặc dù WordPress đã cung cấp một số font chữ cơ bản, nhưng đôi khi bạn muốn sử dụng một font chữ tùy chỉnh để làm cho trang web của bạn nổi bật hơn. Bài viết này sẽ hướng dẫn bạn chi tiết các cách thêm font tùy chỉnh vào WordPress.

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 trang web của bạn:

  • Tăng tính nhận diện thương hiệu: Font chữ là một phần quan trọng của nhận diện thương hiệu. Sử dụng một font chữ độc đáo sẽ giúp khách hàng dễ dàng nhận biết và ghi nhớ thương hiệu của bạn.
  • Cải thiện trải nghiệm người dùng: Chọn một font chữ dễ đọc và phù hợp với nội dung của trang web sẽ giúp người dùng đọc nội dung một cách thoải mái hơn.
  • Tạo sự khác biệt: Sử dụng font chữ tùy chỉnh sẽ giúp trang web của bạn nổi bật giữa hàng triệu trang web khác.

Các Cách 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. Chúng ta sẽ đi qua các phương pháp phổ biến nhất:

1. Sử Dụng Plugin WordPress

Đây là cách đơn giản và phổ biến nhất để thêm font tùy chỉnh vào WordPress, đặc biệt là cho người dùng không quen thuộc với code. Có rất nhiều plugin miễn phí và trả phí cho phép bạn dễ dàng tải lên và sử dụng font tùy chỉnh.

Các Plugin Phổ Biến

Một số plugin được đánh giá cao bao gồm:

  • Easy Google Fonts: Cho phép bạn dễ dàng tích hợp font chữ Google vào WordPress.
  • Use Any Font: Cho phép bạn tải lên font chữ từ máy tính của mình.
  • Font Awesome: Cung cấp một bộ sưu tập lớ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ù tập trung vào icons, nhưng nó là một font.)

Hướng Dẫn Sử Dụng Plugin “Use Any Font”

  1. Cài đặt và kích hoạt plugin: Truy cập “Plugins” > “Add New” trong bảng điều khiển WordPress của bạn, tìm kiếm “Use Any Font” và cài đặt, sau đó kích hoạt plugin.
  2. Tạo API key: Sau khi kích hoạt, bạn sẽ cần tạo một API key miễn phí từ trang web của nhà phát triển plugin. Làm theo hướng dẫn trên trang để tạo key và nhập nó vào plugin.
  3. Tải lên font chữ: Truy cập “Use Any Font” trong bảng điều khiển WordPress của bạn, chọn “Upload Fonts” và tải lên các tệp font chữ của bạn (thường là .ttf, .woff, .woff2).
  4. Gán font chữ cho các phần tử: Sau khi tải lên, bạn có thể gán font chữ cho các phần tử khác nhau trên trang web của bạn, chẳng hạn như tiêu đề, đoạn văn bản, menu, v.v. Sử dụng tùy chọn “Assign Fonts” trong plugin.

2. Sử Dụng Google Fonts (Qua Theme Customizer hoặc Code)

Google Fonts là một thư viện font chữ miễn phí khổng lồ với hàng ngàn font chữ khác nhau. Bạn có thể dễ dàng tích hợp Google Fonts vào WordPress thông qua Theme Customizer hoặc bằng cách thêm code vào theme của bạn.

Sử Dụng Theme Customizer

Nhiều theme WordPress hiện đại cho phép bạn chọn Google Fonts trực tiếp từ Theme Customizer. Cách thực hiện:

  1. Truy cập “Appearance” > “Customize” trong bảng điều khiển WordPress của bạn.
  2. Tìm tùy chọn “Typography” hoặc “Fonts” (tên tùy chọn có thể khác nhau tùy thuộc vào theme của bạn).
  3. Chọn font chữ bạn muốn sử dụng cho các phần tử khác nhau trên trang web của bạn.
  4. Nhấn “Publish” để lưu các thay đổi.

Sử Dụng Code (functions.php)

Nếu theme của bạn không hỗ trợ tích hợp Google Fonts trực tiếp, bạn có thể thêm code vào tệp `functions.php` của theme của bạn.

Lưu ý: Chỉnh sửa tệp `functions.php` có thể gây ra lỗi cho trang web của bạn. Luôn tạo bản sao lưu trước khi thực hiện bất kỳ thay đổi nào.

Ví dụ:


  function my_theme_add_google_fonts() {
      wp_enqueue_style( 'my-theme-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap', false );
  }
  add_action( 'wp_enqueue_scripts', 'my_theme_add_google_fonts' );

Trong ví dụ này, chúng ta đang thêm font chữ “Open Sans” với các trọng số 400 và 700. Thay đổi URL font chữ để sử dụng font chữ khác.

Sau khi thêm code vào `functions.php`, bạn cần thêm CSS để sử dụng font chữ đã thêm. Ví dụ:


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

Bạn có thể thêm CSS này vào tệp `style.css` của theme của bạn hoặc thông qua Theme Customizer > Additional CSS.

3. Thêm Font Tùy Chỉnh Qua CSS (Sử Dụng @font-face)

Phương pháp này cho phép bạn thêm bất kỳ font chữ nào, ngay cả khi chúng không có sẵn trên Google Fonts. Bạn cần tải lên các tệp font chữ lên máy chủ của bạn và sau đó sử dụng quy tắc `@font-face` trong CSS để khai báo font chữ.

  1. Tải lên font chữ lên máy chủ: Tạo một thư mục “fonts” trong thư mục theme của bạn (ví dụ: `wp-content/themes/your-theme/fonts/`). Tải lên các tệp font chữ (.ttf, .woff, .woff2) vào thư mục này.
  2. Thêm CSS: Thêm CSS sau vào tệp `style.css` của theme của bạn hoặc thông qua Theme Customizer > Additional CSS:

  @font-face {
      font-family: 'MyCustomFont';
      src: url('/fonts/MyCustomFont.woff2') format('woff2'),
           url('/fonts/MyCustomFont.woff') format('woff'),
           url('/fonts/MyCustomFont.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }

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

Giải thích:

  • `font-family`: Tên bạn muốn đặt cho font chữ của mình.
  • `src`: Đường dẫn đến các tệp font chữ. Sử dụng `get_stylesheet_directory_uri()` để lấy đường dẫn đến thư mục theme của bạn.
  • `format`: Định dạng của tệp font chữ.
  • `font-weight`: Độ đậm của font chữ.
  • `font-style`: Kiểu chữ (ví dụ: normal, italic).

Lưu Ý Quan Trọng Khi Chọn và Sử Dụng Font Tùy Chỉnh

Việc lựa chọn và sử dụng font chữ một cách hợp lý là rất quan trọng để đảm bảo trải nghiệm người dùng tốt và hiệu suất trang web tối ưu.

  • Tính dễ đọc: Chọn font chữ dễ đọc, đặc biệt là cho nội dung chính của trang web. Tránh sử dụng các font chữ quá cầu kỳ hoặc khó đọc.
  • Số lượng font: Hạn chế số lượng font chữ sử dụng trên trang web. Quá nhiều font chữ có thể làm trang web trông rối mắt và làm chậm tốc độ tải trang.
  • Tối ưu hóa hiệu suất: Sử dụng các định dạng font chữ đã được tối ưu hóa cho web, chẳng hạn như WOFF2. Sử dụng CDN để phân phối font chữ.
  • Giấy phép: Đảm bảo bạn có quyền sử dụng font chữ mà bạn chọn. Một số font chữ có thể yêu cầu bạn phải mua giấy phép.

Kết Luận

Thêm font tùy chỉnh vào WordPress là một cách tuyệt vời để tạo ra một trang web độc đáo và phù hợp với thương hiệu của bạn. Bằng cách sử dụng các plugin, Google Fonts hoặc CSS, bạn có thể dễ dàng tùy chỉnh font chữ trên trang web của mình. Hãy nhớ lựa chọn và sử dụng font chữ một cách hợp lý để đảm bảo trải nghiệm người dùng tốt và hiệu suất trang web tối ưu.

Related Topics by Tag
, , , ,

..