Hướng dẫn Google Fonts – Chèn Google Fonts vào WordPress

Nếu bạn làm website thì đôi lúc bạn sẽ cần dùng đến font để tùy biến hiển thị. Bài viết này mình sẽ hướng dẫn cho các bạn cách chèn Google Fonts vào website như thế nào? Đối với WordPress thì chèn Google Fonts như thế nào cho phù hợp?

Google Fonts ra mắt vào năm 2010. Nó đã làm thay đổi rất nhiều về xu hướng thiết kế website. Các giao diện được tùy biến nhiều hơn và ngày càng bắt mắt, thân thiện hơn với người dùng.

Tạo sao bạn nên dùng Google Fonts

Chào mừng bạn đến với những gì mà các nhà thiết kế web coi như là bạn thân nhất của họ. Nếu lúc trước kia khi mà Google Fonts chưa xuất hiện. Khi muốn tùy chỉnh font chữ thì bạn phải kèm theo font trên hosting hoặc upload lên server nào đó rồi mới lấy link để chèn. Nhưng từ khi Google Fonts ra mắt vào năm 2010 thì mọi thứ đã thay đổi. Giờ đây, ngoại trừ các font quá đặc biệt thì mình mới đính kèm font trong giao diện, còn không thì mình cứ dùng font trên Google Fonts.

Bên dưới là lý do tại sao bạn nên dùng Google Fonts:

• Hoàn toàn miễn phí: Không quan trọng bạn sử dụng bao nhiêu font trên một trang web, không quan trọng bạn chèn Google Fonts vào bao nhiêu website của bạn. Mọi thứ đều hoàn toàn miễn phí, bạn không phải bỏ tiền ra để mua font.
• Vào tháng 4 năm 2018, hiện đang có hơn 876 font miễn phí trong thư viện Google Fonts. Bạn hoàn toàn có thể chọn được font phù hợp với thương hiệu và trang web của bạn.
• Tải nhanh: Bởi vì tất cả các font đều được lưu trữ trên server của Google. Mọi thứ đã được nén và tối ưu một cách thông minh nhất để cho bạn có được tốc độ tải trang nhanh nhất.
• Dễ tích hợp: Chỉ đơn giản là bạn tìm kiếm font ưng ý, sau đó cóp dán vào website là xong.
• Được sắp xếp: Tất cả các font đều được sắp xếp vào từng chuyên mục riêng, phù hợp với nội dung và sở thích của mọi người. Google Fonts cũng hỗ trợ cho bạn các bộ lọc để bạn tìm kiếm font dễ dàng nhất.
• Như mình đã nói, Google Fonts là miễn phí và nó hoàn toàn miễn phí 100%.

Cài đặt Google Fonts như thế nào?

Bạn không cần phải đau đầu và tốn và nhiều thời gian vào việc này. Bạn chỉ cần lên Google Fonts và tìm kiếm font ưng ý.

Một khi bạn đã chọn được font, các font của bạn sẽ được lưu lại giống kiểu shopping cart. Sau khi bạn hoàn tất tìm kiếm font, bạn nhìn xuống bên dưới màn hình có ô hiển thị các font bạn đã chọn. Bạn click vào đó để xem chi tiết và tùy chọn cách chèn.

Thêm style

Trong mục này bạn có thể thêm các style tùy chỉnh cho font như chọn kiểu font là italic, bold, bold-italic,… Bạn nhấn vào tab CUSTOMIZE để chọn các style tùy thích. Bạn nhớ chú ý tới tốc độ tải font nhé.

Sử dụng thẻ link HTML hay dùng @import trong CSS tốt hơn?

Công việc cuối cùng của bạn là chọn chèn Google Fonts theo dạng embed standard hay @import? Có 2 lựa chọn cho bạn. Nếu bạn chọn theo kiểu embed standard thì code sẽ được chèn vào thẻ head của web như sau:

<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">

Ví dụ trên là mình chọn 2 font: Roboto và Roboto Condensed nhé. Không có các tùy chọn thêm. Nếu bạn chọn embed theo kiểu @import trong CSS thì bạn dùng như sau:

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed');
</style>

Đoạn code trên bạn cũng chèn vào thẻ head của web nhé. Nếu bạn chèn trực tiếp vào tập tin .css của bạn thì bỏ vào trên cùng của file dòng code bên dưới:

@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed');

Thông thường, cách dùng thẻ link chèn vào giữa thẻ head sẽ là tốt nhất. Các font của bạn sẽ được tải nhanh hơn thay vì chèn vào tập tin css. Ngoài ra thì cách này cũng phù hợp cho các trình duyệt cũ.

Chèn Google Fonts vào WordPress

Đối với bất kỳ website nào thì bạn chỉ cần chèn thẻ link chứa font vào giữa thẻ head của website là được. Nhưng đối với WordPress thì bạn nên áp dụng hook để thực hiện. Nếu giao diện hoặc plugin của bạn cho phép thêm code vào thẻ head thì bạn sử dụng tính năng này. Nếu bạn là một lập trình viên thì bạn sẽ dùng hook như sau:

function hocwp_theme_custom_wp_head_action() {
	?>
	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,700i|Roboto:400,700,700i" rel="stylesheet">
	<?php
}

add_action( 'wp_head', 'hocwp_theme_custom_wp_head_action' );

Nếu bạn là người dùng bình thường và giao diện không có tính năng thêm code vào thẻ head thì bạn dùng plugin Insert Headers and Footers nhé.

Sử dụng font trong tập tin CSS của bạn

Sau khi chèn Google Fonts vào website rồi thì bạn cần phải gọi thuộc tính font-family để sử dụng. Và luôn nhớ dùng kèm với font backup là sans-serif phía sau nhé. Phòng trường hợp font chính không dùng được thì trình duyệt sẽ nhận font backup.

font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;

Dựa vào cú pháp trên bạn hoàn toàn có thể tùy biến font cho heading hoặc đoạn văn bản. Bạn có thể xem qua bài viết top 20 font trên Google Fonts có hỗ trợ Tiếng Việt mình đã đăng trước đó trên blog.

Kết luận

Google Fonts là công cụ mạnh mẽ hỗ trợ cho các bạn thiết kế website. Tùy vào sở thích và yêu cầu của mỗi trang web mà bạn sẽ chọn font cho phù hợp. Không có font nào là tốt nhất, chỉ có sở thích của bạn là chọn font nào.

Hy vọng qua bài viết này thì bạn đã biết cách chèn Google Fonts vào website nói chung và chèn Google Fonts vào WordPress nói riêng. Có thể lúc đầu bạn sẽ khó kết hợp các font. Nhưng dần theo thời gian bạn sẽ quen. Thường thì các thẻ heading người ta hay dùng font chữ mỏng (thin). Điểm này thì bạn hoàn toàn có thể học hỏi kinh nghiệm từ các trang web có thiết kế đẹp. Chúc bạn thành công.