Bạn đang băn khoăn phải làm gì để thêm custom font trên WordPress? font chữ tùy chỉnh cho phép bạn sáng tạo và kết hợp các font chữ khác nhau trên trang web của mình để nâng cao tính thẩm mỹ và trải nghiệm người dùng.
Ngoài đẹp ra, custom font cũng tạo ra cảm giác thích thú đọc bài viết hơn, gây ấn tượng thương hiệu và kích thích người dùng truy cập website của bạn lâu hơn.
Trong bài viết này, mình sẽ chỉ cho bạn cách thêm font chữ tùy chỉnh trong WordPress bằng Google Fonts, TypeKit và CSS3 @ Font-Face.
Lưu ý: việc load quá nhiều font chữ có thể làm chậm trang web của bạn. Mình khuyên bạn nên chọn hai font chữ thôi và sử dụng xuyên suốt trang web của bạn. Và mình cũng sẽ chỉ cho bạn cách load font chữ đúng cách mà không làm chậm trang web của bạn.
Trước khi vào vấn đề, hãy cùng xem qua việc tìm kiếm font chữ tùy chỉnh mà bạn có thể sử dụng nhé.
Cách tìm Custom Font để sử dụng trong WordPress
Ngày trước bạn phải tốn kha khá tiền để mua font chữ, nhưng giờ thì đã khác. Có nhiều nơi để tìm các font chữ miễn phí tuyệt vời cho web như Google Fonts, Typekit, FontSquirrel và Font.com.
Nếu bạn không biết cách mix và ghép cặp các font chữ như nào cho đẹp mắt thì hãy thử Font Pair. Nó giúp các nhà thiết kế ghép các font chữ Google với nhau theo những cách hài hòa nhất.
Khi bạn chọn font chữ của mình, hãy nhớ rằng sử dụng quá nhiều font chữ tùy chỉnh sẽ làm chậm trang web của bạn. Đây là lý do tại sao bạn chỉ nên chọn hai font chữ và sử dụng chúng trong suốt quá trình thiết kế .Điều này cũng sẽ mang lại sự nhất quán cho thiết kế của bạn.
Xem Video hướng dẫn
Nếu bạn không muốn xem video mà thích đọc hướng dẫn, vui lòng hãy tiếp tục.
Hướng dẫn thêm custom font vào WordPress từ Google Fonts
Google Fonts là thư viện font chữ lớn nhất, miễn phí và được sử dụng phổ biến nhất với các website developer. Có nhiều cách để bạn có thể thêm và sử dụng Google Fonts trong WordPress.
Cách 1: Thêm Custom Font bằng cách sử dụng Easy Google Fonts 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à phương pháp dễ nhất thường dùng với người mới bắt đầu.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Easy Google Fonts. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress.
Sau khi kích hoạt, bạn có thể vào phần Appearance >> Customizer . Việc này sẽ mở ra phần giao diện tùy biến cho live theme, nơi bạn sẽ thấy mục Typography.
Khi nhấp vào Typography sẽ hiển thị các vị trí có thể áp dụng Google Fonts trên trang web của bạn. Chỉ cần nhấp vào “Edit Font” bên dưới phần bạn muốn chỉnh sửa.
Trong phần Family Font, bạn có thể chọn bất kỳ font chữ Google nào bạn muốn sử dụng trên trang web của mình. Bạn cũng có thể chọn kiểu font chữ, cỡ chữ, phần đệm, lề ,…
Tùy thuộc vào chủ đề của bạn, nhiều vị trí trên website có thể bị giới hạn và bạn có thể sẽ không thay đổi được font chữ ở đó.
Để khắc phục điều này, plugin cũng cho phép bạn tạo các trình điều khiển của riêng mình và sử dụng chúng để thay đổi font chữ trên trang web của bạn.
Trước tiên, bạn cần truy cập Setting » Google Fonts và đặt tên cho trình điều khiển font chữ của bạn. Hãy đặt cái tên giúp bạn dễ nhận biết được bạn sẽ sử dụng trình điều khiển này ở đâu và mục đích là gì.
Tiếp theo, nhấp vào nút “Create font control” và sau đó bạn sẽ được yêu cầu nhập CSS selector.
Bạn có thể thêm các HTML vào những nơi bạn muốn hướng đến (ví dụ: h1, h2, p, blockquote) hoặc sử dụng các lớp CSS.
Bạn có thể sử dụng công cụ Inspect trong trình duyệt của bạn để tìm hiểu class CSS nào được sử dụng bởi những khu vực nào mà bạn muốn thay thế.
Bây giờ bấm vào nút “Save font control”để lưu các cài đặt của bạn. Bạn có thể tạo nhiều bộ điều khiển font chữ cho các phần khác nhau của trang web của bạn.
Để sử dụng các bộ điều khiển font chữ này, bạn cần đi đến Appearance » Customizer (Giao diện »Tùy biến) và nhấp vào tab Typography.
Trong tab Typography, bạn sẽ thấy phần ‘Theme Typography’. Trong đó sẽ hiển thị các tuỳ chọn của trình điều khiển font chữ mà bạn đã tạo trước đó. Bây giờ bạn chỉ cần nhấp vào nút Edit (chỉnh sửa) để chọn font chữ và giao diện cho trình điều khiển này.
Đừng quên bấm vào nút Save (lưu) hoặcPublish (xuất bản) để lưu các thay đổi nhé.
Cách 2: Cách thêm thủ công Google Fonts trong WordPress
Phương pháp này yêu cầu bạn chèn code vào các file theme WordPress. Nếu bạn đã thực hiện điều này trước đây, thì hãy xem hướng dẫn của mình về Hướng dẫn Copy và Paste Code trong WordPress.
Đầu tiên, hãy truy cập Google Font Library và chọn một font chữ mà bạn muốn sử dụng. Tiếp theo, nhấp vào nút “quick use” (sử dụng nhanh) bên dưới font chữ.
Trên trang font chữ, bạn sẽ thấy các Style có sẵn cho font chữ đó. Chọn các Style mà bạn muốn sử dụng trong bài của bạn và sau đó nhấp vào thanh sidebar ở trên cùng.
Tiếp theo, bạn sẽ cần chuyển sang tab “Embed” (mã nhúng) trong thanh sidebar để sao chép mã nhúng.
Có hai cách để thêm mã này vào trang web WordPress của mình.
Trước tiên, bạn chỉ cần chỉnh sửa file theme header.php của bạ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.
Bạn chỉ cần cài đặt và kích hoạt plugin Insert Headers and Footers (Chèn Tiêu đề và Chân trang). Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress.
Sau khi kích hoạt, hãy đi tới Settings » Insert Headers and Footers (Cài đặt »Chèn trang Tiêu đề và chân trang) và dán mã nhúng vào ‘Scripts in header’ .
Đừng quên bấm vào nút Save để lưu các thay đổi của bạn. Plugin hiện sẽ bắt đầu tải mã nhúng Google Font trên tất cả các trang của website bạn.
Bạn có thể sử dụng font chữ này trong stylesheet theme như hình dưới:
.h1 site-title {
font-family: 'Open Sans', Arial, sans-serif;
}Để biết hướng dẫn chi tiết hơn, hãy xem hướng dẫn của mình về Hướng dẫn thêm font chữ Google trong chủ đề WordPress.
Thêm Custom Font trong WordPress bằng Typekit
Typekit của Adobe Fonts là một nguồn font chữ chất lượng và miễn phí khác bạn có thể dùng trong các project thiết kế của bạn. Bạn có thể sử dụng phiên bản trả phí hoặc bản free giới hạn.
Chỉ cần đăng ký tài khoản Adobe Fonts và vào phần Browse Fonts. Từ đây bạn cần nhấp vào nút </> để chọn font chữ và tạo project.
Tiếp theo, bạn sẽ thấy mã nhúng và ID project của bạn. Bạn sẽ nhìn thấy hình ảnh thực tế của font này trong theme CSS.
Bạn cần sao chép và dán mã này vào phần <head> trên trang web của bạn.
Hai cách để thêm mã này vào trang web WordPress của mình.
Thứ nhất, bạn có thể chỉ cần chỉnh sửa tệp theme header.php của bạn và dán mã trước thẻ <body>.
Tuy nhiên, nếu bạn không quen với việc chỉnh sửa mã trong WordPress, thì bạn có thể sử dụng một plugin để thêm code này.
Chỉ cần cài đặt và kích hoạt plugin Insert Headers and Footers (Chèn Tiêu đề và Chân trang).
Sau khi kích hoạt, hãy đi tới Settings » Insert Headers and Footers (Cài đặt »Chèn trang Tiêu đề và chân trang) và dán mã nhúng vào ‘Scripts in header’ .
Xong rồi, bây giờ bạn có thể sử dụng font chữ của Typekit trong theme stylesheet của WordPress như ảnh dưới:
h1 .site-title {
font-family: gilbert, sans-serif;
} Để biết hướng dẫn chi tiết hơn, hãy xem hướng dẫn của mình về Làm thế nào để thêm Typography trong WordPress bằng Typekit.
Thêm font chữ tùy chỉnh trong WordPress bằng CSS3 @ font-face
Cách trực tiếp nhất để thêm font chữ tùy chỉnh trong WordPress là bằng cách thêm font chữ bằng cách dùng CSS3 @ font-face. Phương pháp này cho phép bạn sử dụng bất kỳ font chữ nào bạn thích trên trang web.
Điều đầu tiên bạn cần làm là tải xuống font chữ mà bạn thích ở định dạng web. Nếu bạn không có định dạng web cho font chữ của mình, thì bạn có thể chuyển đổi nó bằng cách dùng FontSquirrel Webfont generator.
Khi bạn có tệp webfont, bạn cần tải nó lên WordPress Server của mình.
Thường thì bạn nên tải các font chữ vào một thư mục “fonts” mới của theme hoặc các thư mục theme con
Bạn có thể sử dụng FTP hoặc File Manager (Trình quản lý tệp) của cPanel để tải lên font chữ.
Khi các font chữ đã được tải xong, bạn cần load font lên stylesheet của bạn dùng CSS3 @font-face như hình minh họa dưới:
@font-face {
font-family: Arvo;
src: url(https://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}Đừng quên thay thế family-font và URL của riêng bạn.
Sau đó, bạn có thể sử dụng font chữ đó ở bất cứ đâu trong theme stylesheet:
.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}Tuy nhiên tải font chữ trực tiếp bằng CSS3 @ font-face không phải lúc nào cũng là giải pháp tốt nhất. Nếu bạn đang sử dụng một font chữ từ Google Fonts hoặc Typekit, thì tốt nhất là sử dụng font chữ trực tiếp từ server của họ là tối ưu nhất .
Xong rồi đó, mình hy vọng bài viết này sẽ giúp ích cho bạn trong việc tìm kiếm font chữ tuỳ chỉnh trong WordPress. Có thể bạn sẽ muốn xem hướng dẫn này của mình về cách sử dụng icon fonts trong WordPress và làm sao để thay đổi kích cỡ font chữ trong WordPress.
Nếu bạn thích bài viết này, hãy theo YouTube Channel để xem thêm các hướng dẫn về WordPress. Bạn có thể tìm kiếm chúng tôi trên Twitter and Facebook.
