Thêm font chữ tùy chỉnh trong WordPress không chỉ làm tăng tính thẩm mỹ cho website mà còn giúp truyền đạt thông điệp và thương hiệu một cách mạnh mẽ. Việc sử dụng font chữ độc đáo có thể tạo ra sự khác biệt, thu hút sự chú ý và tạo ấn tượng đặc biệt với người đọc. Trong bài viết này, hãy cùng Vietnix khám phá cách thêm font chữ tùy chỉnh vào WordPress, từ đó nâng cao trải nghiệm người dùng và thể hiện phong cách riêng biệt của bạn trên nền tảng này.
Cách tìm font chữ tùy chỉnh để sử dụng trên WordPress
Ngày nay, việc chọn font chữ đã trở nên dễ dàng hơn bao giờ hết với sự xuất hiện của nhiều nguồn cung cấp font chữ miễn phí chất lượng cao như Google Fonts, Typekit, FontSquirrel và fonts.com. Nếu bạn chưa biết cách kết hợp các font chữ, hãy thử sử dụng Font Pair – công cụ giúp người thiết kế kết hợp các font chữ Google một cách đẹp mắt.
Khi chọn font chữ, hãy lưu ý rằng sử dụng quá nhiều font chữ tùy chỉnh có thể làm giảm tốc độ website. Do đó, chỉ nên sử dụng hai font chữ và áp dụng chúng trong toàn bộ thiết kế để tạo tính nhất quán cho bố cục.
3 cách thêm font chữ tùy chỉnh trong WordPress
Cách 1. Thêm font chữ tùy chỉnh trong WordPress từ Google Fonts
Google Fonts là thư viện font chữ miễn phí lớn nhất và được sử dụng phổ biến nhất trong số các nhà phát triển website. Có nhiều cách bạn có thể thêm và sử dụng Google Fonts trong WordPress, các phương pháp phổ biến chính là thêm bằng plugin và thủ công.
Thêm font chữ tùy chỉnh bằng plugin
Nếu bạn muốn thêm và sử dụng Google Fonts trên trang web của mình, thì phương pháp này là dễ nhất và được khuyến nghị cho người mới bắt đầu. Để bắt đầu, hãy cài đặt và kích hoạt plugin Google Fonts Typography. Nếu trong quá trình thao tác bạn gặp nhiều khó khăn, có thể tham khảo video hướng dẫn sau của Vietnix:
Sau khi kích hoạt, bạn sẽ có cơ hội nhập địa chỉ email của mình để nhận hướng dẫn nhanh chính thức.
Để tùy chỉnh font chữ, hãy truy cập Fonts Plugin > Customize Fonts trên WordPress dashboard. Thao tác này sẽ đưa bạn đến WordPress theme customer và tự động mở phần “Fonts Plugin“.
Ở đây bạn có thể chọn font chữ mặc định trong phần “Basic Settings“, và font chữ cho các phần cụ thể của trang web dưới mục “Advanced Settings“. Hãy bắt đầu bằng cách nhấp vào “Basic Settings“. Tại đây, bạn có thể chọn font chữ cho nội dung, tiêu đề, các button và field nhập liệu.
Menu drop-down “Font Family” cho phép chọn một font chữ mới. Bạn sẽ tìm thấy font mặc định ở đầu tiên, sau đó là các font hệ thống, và cuối cùng là một danh sách lớn gồm hơn 1400 font từ Google Fonts. Khi bạn chọn một font chữ mới, bản xem trước sẽ tự động thay đổi để hiển thị cho bạn thấy rõ font chữ trông như thế nào.
Bây giờ bạn có thể sử dụng cài đặt nâng cao của plugin để tinh chỉnh các lựa chọn font chữ của mình. Bạn cần nhấp vào button mũi tên quay lại “<” ở góc trên cùng bên trái của trang và sau đó nhấp vào mục “Advanced Settings“. Tại đây bạn sẽ tìm thấy các cài đặt cho các phần khác nhau của website, như tiêu đề trang, menu điều hướng, khu vực nội dung, sidebar và footer.
Bạn có thể chọn font chữ tùy chỉnh mà mình muốn sử dụng từ các menu drop-down.
Bạn cũng có thể chọn font chữ tùy chỉnh cho khu vực sidebar của mình theo cách tương tự. Chỉ cần nhấp vào button quay lại và vào mục cài đặt “Sidebar“. Tại đó, bạn sẽ tìm thấy các menu drop-down để chọn font chữ cho các tiêu đề và nội dung của sidebar.
Khi đã hài lòng với lựa chọn font chữ tùy chỉnh của mình, đừng quên nhấp vào button “Publish” để lưu các thay đổi.
Ngoài những nội dung trên trong bài viết, bạn có thể tham khảo:
Thêm font chữ Google theo cách thủ công
Phương pháp này yêu cầu bạn phải thêm code vào các file theme WordPress của mình. Đầu tiên, hãy truy cập thư viện Google Fonts và chọn một font chữ mà bạn muốn sử dụng. Trên trang font chữ, bạn sẽ thấy các kiểu có sẵn cho font đó.
Chọn các kiểu mà bạn muốn sử dụng trong dự án của mình và sau đó nhấp vào button “View selected families” ở phía trên. Điều này sẽ mở ra một sidebar, nơi bạn có thể sao chép embed code (mã nhúng).
Để thêm code này vào trang web WordPress của mình. Đầu tiên, bạn có thể chỉnh sửa file header.php của giao diện và dán code trước tag <body>. Tuy nhiên, nếu bạn không quen với việc chỉnh sửa code trong WordPress, bạn có thể sử dụng plugin WPCode để thêm code này. Sau khi kích hoạt, đi đến trang Code Snippets > Header & Footer và dán embed code vào box “Header“.
Đừng quên nhấp vào button “Save Changes” để lưu các thay đổi. Plugin sẽ bắt đầu tải embed code Google Font trên tất cả các trang của trang web. Bạn có thể sử dụng font này trong bảng kiểu (stylesheet) của giao diện như sau:
.h1 site-title {
font-family: 'Open Sans', Arial, sans-serif;
}Ngoài những thông tin liên quan đến cách thêm font chữ tùy chỉnh trong WordPress, có thể bạn quan tâm:
Xem thêm: 3 cách thay đổi Font chữ theme WordPress
Cách 2. Thêm font chữ tùy chỉnh trong WordPress bằng Adobe Fonts
Adobe Fonts, trước đây được biết đến với tên gọi Typekit, là một nguồn tài nguyên về các font chữ tuyệt vời mà bạn có thể sử dụng trong các dự án thiết kế của mình. Họ cung cấp cả gói đăng ký trả phí và miễn phí có giới hạn mà bạn có thể sử dụng. Chỉ cần đăng ký một tài khoản Adobe Fonts và truy cập phần “Browse Fonts“. Từ đây, bạn cần nhấp vào button </> để chọn một font chữ và tạo một dự án.
Tiếp theo, bạn sẽ thấy embed code với ID dự án, có hướng dẫn cho bạn về cách sử dụng font chữ trong CSS của giao diện website. Bạn cần sao chép code này và dán vào trong phần <head> của trang web.
Có hai cách bạn có thể thêm code này vào trang web WordPress của mình. Đầu tiên, bạn có thể chỉnh sửa file header.php của giao diện và dán code đó trước thẻ <body>. Tuy nhiên, nếu bạn không quen với việc chỉnh sửa code trong WordPress, thì bạn có thể sử dụng một plugin để thêm code này.
Sau khi kích hoạt, đi đến trang Code Snippets > Header & Footer và dán embed code vào box Header. Sau đó, nhấp vào button “Save Changes“.
Dưới đây là cách áp dụng font chữ mà bạn đã chọn vào stylesheet của theme WordPress:
h1 .site-title {
font-family: gilbert, sans-serif;
}Cách 3. Thêm font chữ tùy chỉnh trong WordPress từ CSS3 @font-face
Cách trực tiếp nhất để thêm font tùy chỉnh vào WordPress là sử dụng phương pháp CSS3 @font-face. Cách này cho phép bạn sử dụng bất kỳ font nào mình ưa thích trên trang website của mình. Để bắt đầu, bạn cần tải font về dưới định dạng website. Nếu font không có định dạng website có thể sử dụng công cụ FontSquirrel Webfont generator để chuyển đổi.
Sau khi có các file font dưới định dạng website, bạn cần tải lên máy chủ hosting của WordPress. Vị trí tốt nhất để tải lên là thư mục “fonts” trong thư mục theme hoặc child theme. Bạn có thể sử dụng FTP hoặc file manager trên cPanel để tải font lên.
Sau khi tải lên font, bạn cần đưa font vào theme stylesheet bằng quy tắc CSS3 @font-face như sau:
@font-face {
font-family: Arvo;
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}Hãy thay thế font chữ và địa chỉ URL bằng của riêng bạn để tạo font cách riêng cho webite. Sau đó, có thể sử dụng font chữ đó ở bất kỳ phần nào của giao diện bằng cách thêm:
.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}Nếu bạn đang tìm kiếm một dịch vụ hosting chất lượng cao, hỗ trợ phát triển và quản lý trang web trên nền tảng WordPress, dịch vụ WordPress Hosting của Vietnix là lựa chọn hoàn hảo cho bạn. Được tối ưu hóa đặc biệt cho trang web chạy trên mã nguồn WordPress, WordPress Hosting tại Vietnix mang đến nhiều tính năng ưu việt, bao gồm:
- Tải trang siêu nhanh, dưới 1 giây, nhờ sử dụng ổ cứng NVMe cực kỳ nhanh chóng và công nghệ LiteSpeed Enterprise.
- Hỗ trợ tư vấn tăng tốc độ trang web 24/7 từ các chuyên gia WordPress.
- Bảo vệ dữ liệu an toàn với hệ thống sao lưu tự động 4 lần mỗi ngày và khả năng phục hồi nhanh chóng.
- Đảm bảo ổn định cho trang web với cơ sở hạ tầng tiên tiến và công nghệ Firewall anti DDoS do Vietnix phát triển.
- Tạo trang web WordPress dễ dàng chỉ với một cú click chuột qua WordPress Toolkit.
1 Core1GB RAM1 GB NVME1 DomainBackup tự động 4 lần/ngày1 - 5.000 Traffic/tháng
Tặng theme & plugin trị giá 50.000.000 VND- Plugin: Rank Math SEO Pro
- Plugin: Elementor Pro
- Plugin: WPML
- Plugin: WP Smush Pro
- Theme: Divi
- Theme + plugin: MyThemeShop
- Theme: Bricks
Bán chạy nhất3 Core6GB RAM10 GB NVME2 DomainBackup tự động 4 lần/ngày5.000 - 15.000 Traffic/tháng
Tặng theme & plugin trị giá 50.000.000 VND- Plugin: Rank Math SEO Pro
- Plugin: Elementor Pro
- Plugin: WPML
- Plugin: WP Smush Pro
- Theme: Divi
- Theme + plugin: MyThemeShop
- Theme: Bricks
8 Core12GB RAM25 GB NVME4 DomainBackup tự động 4 lần/ngày15.000 - 100.000 Traffic/tháng
Tặng theme & plugin trị giá 50.000.000 VND- Plugin: Rank Math SEO Pro
- Plugin: Elementor Pro
- Plugin: WPML
- Plugin: WP Smush Pro
- Theme: Divi
- Theme + plugin: MyThemeShop
- Theme: Bricks
Ngoài ra, khi sở hữu WordPress Hosting, bạn còn được tặng bộ theme và plugin WordPress bản quyền vô cùng giá trị. Đăng ký ngay để được trải nghiệm dịch vụ tốt nhất và hưởng những ưu đãi cực kỳ hấp dẫn.
Lời kết
Vietnix hy vọng hướng dẫn này đã giúp bạn tìm hiểu cách thêm font chữ tùy chỉnh trong WordPress. Đồng thời, bạn cũng có thể tham khảo thêm các bài viết khác như các lỗi font chữ trên WordPress phổ biến và cách khắc phục hoặc hướng dẫn cách thay đổi kích thước font chữ trong WordPress . Chúc bạn thành công và đừng ngần ngại để lại bình luận bên dưới để đội ngũ admin của Vietnix có thể hỗ trợ bạn sớm nhất!
