Google cung cấp cho chúng ta dịch vụ dựa trên trang web miễn phí, được gọi là Font google, bất kỳ trang web nào cũng có thế sử dụng Font này hoàn toàn miễn phí mà không bị giới hạn bởi bất kỳ thứ gì. Vì đây là Font dựa trên nền web nên khi sử dụng bạn không cần tải, hoặc upload nó lên máy chủ lưu trữ của mình, và để sử dụng nó rất đơn giản bạn chỉ cần thêm một số đoạn mã chức này trong genesis là có có thể sử dụng được.
Vậy trước khi vào bài hướng dẫn chúng ta sẽ tìm hiểu một số tính năng mà google font mang lại?
Google Fonts là gì?
Đây là một thư viện của Google, để bạn có thể tích hợp miễn phí các file CSS vào website của mình, như thông thường thì nếu bạn sử dụng các font khác thường thì đầu được tính phí bởi nhà cung cấp, trong khi đó các font mặc định này khá ít để hiển thị nếu bạn muốn tùy biến trang web của mình.
Trong Google Fonts, hơn 676 font được phân chia theo Categories, Characteristics và Script khác nhau bạn có thể thoải máy lựa chon cho mình một font đẹp mắt.
Tại sao bạn nên sử dụng Google Fonts?
Sử dụng Google Fonts hỗ trợ hiển thị tiếng việt đầy đủ mà một số bạn khi cài theme mới thường hay gặp lỗi không hiển thị được tiếng việt có dấu như dấu có mũ, dấu hỏi, dấu ngã.
Cách sử dụng Google Fonts vào genesis framework
Để sử dụng google font trước tiên bạn nên backup dữ liệu trang web của mình, tránh trường hợp dủi do không cần thiết.
Truy cập Appearance > Editor sao chép toàn bộ mã bên dưới dán vào cuối file functions.php.
//* Add Google Font in Genesis
add_action( 'wp_enqueue_scripts', 'genesis_ig_google_fonts' );
function genesis_ig_google_fonts() {
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Lato', array(), CHILD_THEME_VERSION );
}
Vậy là bạn đã thêm chức năng font google vào trang web của mình, có một điểm lưu ý là sau khi thực hiện các thay đổi trên, bạn chỉ cần truy cập vào file style.css và đổi tên Google Font mà bạn muốn sử dụng tương tự như ảnh bên dưới.
Thêm nhiều Google Font vào genesis framework
Trong quá trình sử dụng nếu bạn muốn thêm một số font chữ khác từ google, bạn không phải lặp lại toàn bộ mã. Chỉ cần nối thêm tên của Google Font mới bên cạnh Google Font hiện là được, lưu ý sẽ phải cách nhau bằng một đường thẳng đứng.
Ví dụ: Mã sau đây mình thêm ba phông chữ của Google: Lato, Open Sans, Oswald.
//* Add multiple Google Fonts in Genesis
add_action( 'wp_enqueue_scripts', 'genesis_ig_multiple_google_fonts' );
function genesis_ig_multiple_google_fonts() {
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Lato|Open+Sans|Oswald:400,300,700', array(), CHILD_THEME_VERSION );
}
Trong mã trên, (400.300.700) là các id phông chữ khác nhau hoặc các giá trị đậm cho Google Font cụ thể. Thuộc tính này được hỗ trợ bởi Phông chữ Google đã chọn.
Đối với một số bạn không thích code thủ công thì có thể sử dụng Easy Google Fonts để thay thế tương tự.
