Hướng dẫn thêm Google Fonts cho WordPress site

Thêm Google Fonts cho WordPress site giúp cho nội dung của bạn hiển thị một cách mới mẻ và nổi bật. Nó làm tăng trải nghiệm người dùng và làm cho họ thích thú hơn khi đọc nội dung trên blog/website của bạn. Vậy bạn có muốn thêm Google Fonts cho WordPress site của mình? Trong bài viết này chúng ta cùng tìm hiểu cách thêm Google Fonts cho WordPress site bằng hai cách phổ biến là sử dụng plugin và code tùy chỉnh.

1. Thêm Google Fonts cho WordPress site bằng cách sử dụng plugin

Cách đơn giản nhất để thêm Google Fonts cho WordPress là sử dụng plugin. Có 02 plugin phổ biến giúp bạn thực hiện việc này một cách dễ dàng là: Easy Google Fonts và WP Google Fonts.

Easy Google Font

easy google fonts

Plugin chính xác như tên gọi của nó. Nó cung cấp cho bạn cách đơn giản nhất để thêm Google Fonts cho WordPress site của mình. Nó là một plugin miễn phí, vì vậy bạn chỉ cần tiến hành cài đặt như thông thường là được. Nếu bạn chưa biết cách cài đặt plugin, hãy xem lại bài viết Hướng dẫn cài đặt và quản lý plugin trong WordPress.

Plugin này cho phép bạn tùy biến tiêu đề, đoạn văn trong trình tùy chỉnh WordPress Theme. Bạn hãy truy cập vào Appearance » Customize, sau đó chọn Typography » Default Typography. Bạn sẽ thấy hình như bên dưới để chỉnh font cho thẻ tiêu đề hoặc đoạn văn bản.

customize typography

Nhấp vào Edit Font bên dưới phần bạn muốn chỉnh sửa. Bên dưới phần Font Family bạn có thể thêm bất cứ Google Font nào mà bạn muốn sử dụng cho website của mình. Bạn cũng có thể chọn kiểu chữ, kích cỡ chữ và nhiều tùy chọn khác.

Tùy vào WordPress Theme mà bạn đang dùng, số phần có thể bị giới hạn và bạn không thể trực tiếp chỉnh sửa font cho các phần khác trên website của bạn.

Để khắc phục hạn chế đó, plugin cho phép bạn tạo Font Control và dùng nó để thay đổi font chữ trên website. Việc đầu tiên bạn cần làm là truy cập vào trang Settings » Google Fonts và đặt tên cho Font Control của mình. Bạn đặt tên sao cho dễ nhớ, dễ tìm, dễ sử dụng là được.

create font control

Nhấp vào nút “Create Font Control” để tạo Font Control. Sau đó bạn sẽ được yêu cầu nhập vùng chọn CSS. Bạn có thể thêm các phần tử HTML (ví dụ: h1, h2, p…) hoặc các lớp CSS. Bạn có thể sử dụng Inspect Tools để tìm các lớp mà bạn muốn thay đổi.

edit control font

Giờ bạn hãy nhấp vào nút Save Font Control để lưu lại các thay đổi. Bạn có thể tạo ra nhiều Font Control khác nhau theo nhu cầu để áp dụng cho các phần khác nhau trên website của mình.

Để sử dụng các Font Control đã tạo, bạn truy cập vào Appearance » Customizer và nhấp vào thẻ Typography.

Bên dưới Typography bạn sẽ nhìn thấy tùy chọn “Theme Typography”. Nhấp vào đó để hiển thị Font Control mà bạn đã tạo trước đó. Giờ bạn chỉ cần nhấp vào nút Edit để chọn Font chữ mà mình muốn.

theme typography

Đừng quên nhấp vào nút Save hoặc Publish để lưu lại các thay đổi.

WP Google Font

wp google fonts

WP Google Fonts là một WordPress đơn giản. Vì thế tất cả những điều bạn cần làm là truy cập vào Plugins » Add New, sau đó tìm kiếm theo tên plugin và nhấp vào nút Install Now để cài đặt, nhấp vào nút Activate để kích hoạt là xong.

wp google fonts settings

Plugin cho phép bạn thêm tối đa 6 Google Fonts vào website của mình. Bạn có thể chọn phông chữ, kiểu chữ, thành phần HTML và bộ ký tự mà bạn muốn sử dụng với một vài cú nhấp chuột đơn giản. Bạn thậm chí có thể thêm CSS tùy chỉnh của riêng bạn.

2. Thêm Google Fonts bằng code tùy chỉnh

Plugins rất tuyệt nhưng nó vẫn có một số hạn chế nhất định. Bạn cũng có thể sử dụng mã tùy chỉnh để thêm Google Fonts cho WordPress thay vì sử dụng plugins.

Với cách này, bạn cần thêm code vào các tập tin của WordPress Theme.

Chúng ta cùng tìm hiểu một số cách khác nhau để thêm Google Fonts bằng code tùy chỉnh.

Làm thế nào để chọn Google Fonts cho website của bạn?

Thư viện Google Fonts có hàng trăm phông chữ miễn phí khác nhau. Nhưng nếu bạn thêm quá nhiều phông, nó sẽ làm ảnh hưởng đến tốc độ tải trang của bạn. Mặc dù bạn sẽ không cảm thấy trang web của mình bị chậm khi bạn chỉ thêm 01 phông chữ. Do đó hãy sử dụng những phông nào thật sự cần thiết.

Trước tiên bạn truy cập vào thư viện Google Fonts. Với giao diện người dùng thân thiện, nó sẽ giúp bạn tìm chính xác font chữ cho mục đích sử dụng của bạn. Nếu bạn nhớ tên font chữ, bạn chỉ cần nhập vào trường tìm kiếm ở phía bên phải. Nếu không, bạn có thể lọc font chữ theo nhiều cách khác nhau.

google fonts home

Một khi đã tìm được font chữ mà mình mong muốn, bạn hãy nhấp vào biểu tượng dấu cộng màu đỏ để thêm font chữ vào bộ sưu tập của mình. Nó sẽ hiện ra một menu phía bên dưới để bạn có thể nhìn thấy tất cả các font chữ mà bạn đã thêm.

add google font to collection

Lưu ý là bạn có thể thêm nhiều hơn 01 Font Family.

Khi bạn đã có thấy hài lòng với các font chữ mà mình đã chọn, hãy nhấp chuột vào menu phía bên dưới. Một màn hình sẽ hiện ra như bên dưới.

google font family selected

Như bạn có thể thấy, tại đây bạn sẽ tìm được các đoạn code để nhúng vào website của mình. Giờ bạn hãy nhấp vào thẻ Customize.

Tại đây bạn có thể chọn kiểu font chữ. Điều này rất quan trọng nếu bạn muốn sử dụng các cỡ chữ khác nhau.

Tuy nhiên bạn nên cân nhắc vì nhiều kiểu hơn sẽ làm ảnh hưởng đến tốc độ tải trang của bạn. Google còn thậm chí cung cấp công cụ thông báo tốc độ tải trang đối với các font chữ mà bạn chọn ở góc phải phía trên. Vì vậy hãy chọn những kiểu thật sự cần thiết để sử dụng sau này.

Trong trường hợp bạn cần sử dụng một ngôn ngữ khác Latinh, hãy chọn ở phần Laguage. Ví dụ như Vietnames.

customize google font

Sau cùng, bạn cần để ý đến hai biểu tượng mũi tên ở góc phải phía trên màn hình.

download google fonts

Mũi tên phía bên trái cho phép bạn xem trước và chia sẻ font chữ mà mình đã chọn. Khi bạn nhấp vào nó, một trang mở rộng sẽ hiện ra. Tại đây bạn có thể chèn một đoạn văn bản mẫu để xem thử nó hiển thị như thế nào. Bạn cũng có thể chia sẻ trang này với mọi người.

Quan trọng hơn là nút Download ở bên phải. Bạn có thể nhấp vào nút này để tải font chữ về máy tính và sử dụng.

Thêm Google Fonts cho WordPress bằng phương pháp Standard

Sau khi đã chọn được Fonts chữ yêu thích, giờ là lúc bạn thêm Google Fonts cho WordPress. Có nhiều cách để thực hiện việc này. Trước tiên chúng ta cùng tìm hiểu phần EMBED trong giao diện người dùng của Google Fonts.

embed in google fonts

Tại đây, chúng ta có thể nhúng Fonts tùy chỉnh bằng CSS, HTML, hoặc tập tin functions.php của WordPress Theme.

Thêm Google Fonts bằng cách sử dụng @font-face

Với toán tử @font-face của CSS, bạn có thể nói với trình duyệt tải fonts mà bạn chỉ định trên máy chủ của mình.

Điều đó có nghĩa là, để sử dụng cách này bạn cần tải font chữ mà bạn đã chọn trong thư viện Google Fonts sau đó tải nó lên máy chủ bằng FTP hoặc trình quản lý tập tin File Manager của cPanel.

Bạn hãy nhấp vào biểu tượng Download ở góc phải phía trên để tải font chữ về.

download google fonts

Sau khi tải về, bạn hãy upload nó lên thư mục fonts trong WordPress Theme của mình. Sau khi đã tải fonts lên, bạn có thể gọi fonts ra sử dụng bằng đoạn mã bên dưới:

@font-face {
font-family: Lato;
src: url(‘http://yoursite.com/wp-content/themes/yourtheme/fonts/Roboto-Regular.ttf’) format(‘truetype’),
url(‘http://yoursite.com/wp-content/themes/yourtheme/fonts/Roboto-Italic.ttf’) format(‘truetype’),
url(‘http://yoursite.com/wp-content/themes/yourtheme/fonts/Roboto-Light.ttf’) format(‘truetype’);
}

Khuyết điểm của cách làm này là để có kết quả tốt nhất, bạn cần phải thêm nhiều định dạng cho fonts chữ. Mặc dù hầu hết các trình duyệt hiện đại đều xử lý được tập tin có phần mở rộng là .ttf (True Type Fonts), nhưng các trình duyệt cũ thì không thể.

Ngoài ra Fonts chữ không tự động cập nhật. Vì vậy cách này không được khuyên dùng.

Gọi Fonts thông qua CSS bằng @import

Tùy chọn thứ hai để thêm Google Fonts cho WordPress là tải chúng trong tập tin style.css bằng @import.

Cách này cũng tương tự như cách sử dụng @font-face. Tuy nhiên thay vì tải fonts chữ từ máy chủ của bạn, nó sẽ tải fonts chữ từ bất cứ nơi nào (trong trường hợp này là từ Google).

Việc thiết lập khá dễ dàng vì Google đã cung cấp sẵn những thứ cần thiết cho bạn. Bạn chỉ cần nhấp vào thẻ @IMPORT trong giao diện người dùng Google Fonts để tìm mã CSS cần thiết.

import google fonts

Giờ việc bạn cần làm là copy nó và dán ở đầu tập tin style.css. Lưu lại là xong.

/* Theme Name: Twenty Seventeen Child Theme
URI: https://wordpress.org/themes/twentyseventeen/
Template: twentyseventeen
Author: the WordPress team Author
URI: https://wordpress.org/
Version: 1.0 */
@import url(‘https://fonts.googleapis.com/css?family=Open+Sans|Roboto’);
/* additional CSS goes here */

Trong khi đây là một cách đơn giản để thêm Google Fonts vào WordPress, nhưng nó lại gây ảnh hưởng xấu đến hiệu năng trang web vì nó chặn tải xuống song song. Điều đó có nghĩa là, các trình duyệt phải hoàn thành việc tải xuống phông chữ trước khi chúng có thể chuyển sang phần còn lại của trang web. Đặc biệt nếu bạn thêm nhiều fonts chữ, điều này thực sự có thể làm chậm trang web của bạn.

Thêm Google Fonts cho WordPress bằng HTML

Một trong những cách đơn giản nhất để thêm Google Fonts cho WordPress là copy đoạn code được cung cấp bởi Google sau đó dán vào phần header.php của WordPress Theme. Tuy nhiên bạn cần phải chắc chắn rằng đoạn mã bên dưới nằm trong phần <head> của website.

<link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>

Đừng quên lưu lại nội dung mà bạn vừa thêm.

Có một chút vấn đề khi sử dụng cách này nếu bạn đang sử dụng một Theme Framework hoặc không phải là ChildTheme. Vì như vậy bạn sẽ không có tập tin header.php và nội dung có thể bị ghi đè nếu tiến hành cập nhật.

Ngoài ra với cách này, nếu một thành phần khác trên trang web của bạn gọi cùng một fonts chữ hoặc stylesheet (rất hiếm nhưng có thể xảy ra) nó sẽ được tải nhiều lần dẫn đến làm chậm tốc độ tải trang của bạn.

Thêm Google Fonts cho WordPress bằng cách sử dụng phương pháp Enqueuing

Cách cuối cùng được khuyên dùng để thêm Google Fonts cho WordPress là sử dụng hàm wp_enqueue_style.

Đoạn mã này nói cho WordPress thêm fonts chữ của bạn vào phần header của mỗi trang trên website của bạn và nó cũng sẽ giữ cho tập tin stylesheets không bị tải nhiều lần.

Để nó hoạt động, tất cả những gì bạn cần làm là liên kết đến fonts trên máy chủ Google. Trong trường hợp của tôi nó là https://fonts.googleapis.com/css?family=Roboto.

Việc tiếp theo bạn cần làm là thêm đoạn code bên dưới vào vào tập tin functions.php.

function custom_add_google_fonts() {
wp_enqueue_style( ‘custom-google-fonts’, ‘https://fonts.googleapis.com/css?family=Roboto’, false ); }
add_action( ‘wp_enqueue_scripts’, ‘custom_add_google_fonts’ );

Lưu lại các thay đổi. Hãy thay liên kết của tôi bằng liên kết của chính bạn.

Gọi Google Fonts trong StyleSheet của bạn

Giờ fonts chữ đã được thêm vào WordPress site của bạn, và bạn có thể bắt đầu sử dụng nó cho công việc thiết kế của mình. Để sử dụng fonts chữ đã thêm, bạn cần khai báo nó trong tập tin style.css của mình.

Google đã cung cấp sẵn mã CSS giúp bạn có thể khai báo và sử dụng fonts chữ đã thêm một cách dễ dàng.

add css font family to stylesheet

Ví dụ để thay đổi fonts cho thẻ Headings, bạn có thể sử dụng đoạn code bên dưới:

h1, h2, h3, h4, h5, h6 { font-family: ‘Roboto’, sans-serif;}

Vậy là xong, không quá phức tạp như bạn nghĩ đúng không?

Hy vọng rằng bài viết này sẽ giúp bạn biết cách thêm Google Fonts cho WordPress.

Nếu bạn có bất kỳ thắc mắc nào hãy để lại bình luận bên dưới bài viết.

Nếu bạn thấy bài viết này hữu ích đừng quên Like và Share.

Hẹn gặp lại bạn trong bài viết tiếp theo./.

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận