Sử dụng google fonts

Google Fonts
Google Fonts

Trong bài viết text styling, chúng ta đã hiểu được tầm quan trọng của việc định dạng văn bản. Trong bài viết này, chúng ta sẽ tìm hiểu về Google Fonts. Một dịch vụ web font miễn phí được cung cấp bởi Google sẽ giúp trang web của chúng ta sống động và hoạt động ổn định hơn bao giờ.

Đây là trang chủ của dịch vụ Google Fonts.

Google Fonts

Google Fonts là một dịch vụ miễn phí của Google. Nó cung cấp khoảng 1000 fonts miễn phí cho dịch vụ web.

Google Fonts được xây dựng vào năm 2010. Sau nhiều lần thay đổi vào các năm 2011, 2016 và mới nhất là 2020. Hầu hết các font chữ vẫn được Google cung cấp một cách miễn phí.

Tất cả chúng ta đều biết Google hiện nay lớn đến mức nào. Hệ thống của Google lớn và ổn định ra sao. Do đó, chúng ta cũng không cần tranh luận quá nhiều về chất lượng một dịch vụ do Google phát hành.

Tìm kiếm font phù hợp

Với con số sấp sỉ 1000 fonts, chắc chắn chúng ta sẽ gặp 1 chút khó khăn trong việc chọn lựa. Vậy, để tìm kiếm được font chữ phù hợp. Trước hết, chúng ta cần biết rõ, mình đang tìm kiếm cái gì. Tiếp theo, chúng ta cần sử dụng một cách khôn ngoan công cụ của nhà phát hành cung cấp.

Danh mục font

Trong 2 bài viết về Text Styling, mình có giới thiệu qua về khái niệm này, chúng ta có thể chia các fonts chữ vào 5 nhóm chính:

Serif và Sans Serif

Các fonts chữ này tạo cảm giác dễ chịu cho người đọc. Do đó, chúng ta có thể dùng chúng để trình bày các đoạn văn bản dài mà không lo lắng làm người dùng khó chịu. Bên dưới là hình mô tả sự khác biệt chính giữa 2 nhóm fonts này.

Serif vs Sans Serif
Serif vs Sans Serif

Monospace

Nhóm này bao gồm các fonts chữ có độ rộng các ký tự bằng nhau. Do độ rộng các ký tự là bằng nhau, nên chúng ta sẽ có cảm giác các ký tự của font này sẽ hơi tròn. Một số người sẽ gặp vấn đề nếu 1 đoạn văn quá dài được sử dụng kiểu font này.

Monospaced Fonts
Monospaced Fonts

Display

Bao gồm các font chữ có cấu tạo cầu kỳ, đặc sắc. Thông thường, các fonts trong nhóm display sẽ được sử dụng với mục đích làm tiêu đề. Với một đoạn văn ngắn gây ấn tượng với người dùng.

Monospaced Fonts
Monospaced Fonts

Handwriting

Là các font chữ mô phỏng chữ viết tay, các font chữ này cũng khá thú vị. Tuy nhiên, theo mình nghĩ nó chỉ phù hợp cho các đoạn văn nhỏ như câu trích dẫn, phần tóm tắt hoặc đoạn giới thiệu… Hoặc đôi lúc, chúng ta cũng có thể sử dụng nó để thay thế có nhóm display.

Handwriting font
Handwriting font

Hỗ trợ ngôn ngữ

Nếu trang web của chúng ta sử dụng ngôn ngữ chứa ký tự unicode như Tiếng Việt. Các bạn cần phải đảm bảo, font chữ chúng ta chọn có hỗ trợ mọi ký tự trong ngôn ngữ đó.

Vậy bước đầu tiên, ở thanh công cụ hỗ trợ tìm kiếm của Google Fonts. Chúng ta sẽ tập trung vào categories (danh mục) và language (ngôn ngữ) trước.

Chú ý danh mục và ngôn ngữ
Chú ý danh mục và ngôn ngữ

Thử nghiệm trực tiếp

Đây là một chức năng khá hấp dẫn, giúp chúng ta có thể dễ dàng hơn đưa ra lựa chọn của mình.

Thử nghiệm font chữ
Thử nghiệm font chữ

Chúng ta có thể thử nghiệm với 1 câu hay 1 đoạn văn ngắn, chọn kích thước. Google Fonts sẽ hiển thị đoạn văn mẫu của chúng ta theo các fonts tương ứng. Một cách trực quan như vậy, chúng ta sẽ dễ dàng đưa ra lựa chọn của mình.

Nhúng font chữ vào trang web

Sau khi đã chọn lựa được font chữ thích hợp, mình sẽ click vào nó.

Font Dancing Script
Font Dancing Script

Ở trang mô tả chi tiết về font Dancing Script. Chúng ta có 5 mục.

Chi tiết Dancing Script
Chi tiết Dancing Script

Selects styles: sẽ liệt kê các styles (normal – italic) và độ đậm nhạt (font-weight) của font hiện tại. Để tối ưu tốc độ tải trang, chúng ta chỉ nên chọn vừa đủ theo nhu cầu.

Select styles
Select styles

Các bạn có thể thấy, font Dancing Script hỗ trợ chúng ta tổng cộng 4 biến thể.

  • Regular 400 – tương đương với: font-style: normal, font-weight: 400
  • Medium 500 – tương đương với: font-style: normal, font-weight: 500
  • Semi-bold 600 – tương đương với: font-style: normal, font-weight: 600
  • Bold 700 – tương đương với: font-style: normal, font-weight: 700

Các fonts khác có thể hỗ trợ thêm font-style: italic và nhiều giá trị font-weight hơn. Trong trường hợp này, mình sẽ chỉ cần biến thể ‘Medium 500’. Do đó, mình sẽ chỉ chọn nó thôi. Các bạn có thể chọn thêm hoặc xóa bớt các biến thể/font đã chọn. Các fonts và biến thể đã chọn được liệt kê phía bên tay phải của chúng ta.

Glyphs: Mô tả cách hiển thị các ký tự trong font chữ này.
About: Giới thiệu đôi nét về font chữ.
License: Giấy phép để sử dụng font chữ này.
Pairings: Dựa vào số liệu thống kê của Google. Họ sẽ đề xuất cho chúng ta các fonts chữ thường được sử dụng chung với font chúng ta đang chọn.

Nhúng font

Sau khi đã chọn xong font và biến thể chúng ta cần. Việc kế tiếp là nhúng nó vào trang web để sử dụng. Thông thường, sau khi chọn một biến thể bất kỳ, tab ‘Selected family’ sẽ được hiển thị bên tay phải màn hình.

Selected family
Selected family

Trong trường hợp bạn không nhìn thấy tab này, các bạn hãy nhìn góc trên, bên phải và tìm icon để bật/tắt selected family tab.

Để nhúng vào trang web, chúng ta cần chuyển qua tab Embed. Ở tab Embed, chúng ta được Google Fonts cung cấp 2 thông tin.

Nhúng font
Nhúng font

Chúng ta sẽ sử dụng phần tử link để thêm vào tag header của trang web. Tất nhiên, chúng ta cần phải để phần tử này trước khi CSS được nhúng vào tài liệu HTML của chúng ta.

Sử dụng font

Đoạn mã bên dưới là CSS rule, chúng ta có thể copy/paste vào các rule CSS của chúng ta để sử dụng font này. Google còn cẩn thận thêm font default cho chúng ta nữa. Quá tuyệt vời phải không?

Để các bạn hình dung rõ hơn quy trình. Mình sẽ cung cấp một ví dụ nhỏ, cụ thể cách sử dụng các thông tin này.

Và đây là kết quả của chúng ta.