Sử dụng Google Fonts phiên bản mới 2020

Hướng dẫn sử dụng Google Fonts phiên bản mới 20209 phút đọc

Hiện tại khi truy cập vào trang chủ Google Fonts bạn sẽ thấy một giao diện người dùng mới.Giao diện mới này hướng tới phong cách tối giản trong thiết kế và cung cấp nhiều thông tin về font chữ hơn cho người sử dụng.

Tuy giao diện mới nhìn rất hiện đại nhưng lại gây ra không ít khó khăn cho nhiều bạn đã quen với giao diện cũ hay những bạn mới lần đầu sử dụng Google Fonts.Cũng đã không ít bạn gửi tin về blog yêu cầu cập nhật bài viết nhưng mãi đến hôm nay mình mới có thời gian viết bài.

Bài viết hôm nay sẽ hướng dẫn bạn sử dụng Google Fonts phiên bản mới nhất năm 2020.Đồng thời mình vẫn sẽ giữ nguyên bài viết hướng dẫn sử dụng phiên bản cũ do hiện tại có thể chuyển đổi từ phiên bản mới về phiên bản cũ bằng cách nhấn vào menu “Return to classic site” ngay phía trên cùng website.

 

Giao diện sử dụng Google Fonts phiên bản mới

Sau khi truy cập Google Fonts bạn sẽ thấy giao diện người dùng mới như hình ảnh dưới đây.Giao diện mới này không khác mấy so với giao diện cũ nên những bạn đã từng sử dụng Google Fonts rồi sẽ có thể làm quen ngay với nó một cách dễ dàng.

Tuy nhiên một số bạn mới sẽ bỡ ngỡ nên mình sẽ giải thích kĩ nhé.Bạn có thể bỏ qua phần này và tới thẳng phần hướng dẫn sử dụng Google Fonts phiên bản mới nếu bạn đã nắm rõ.

Sử dụng Google Fonts phiên bản mới 2020 00

Sử dụng Google Fonts phiên bản mới 2020 – Làm quen giao diện mới

Mình sẽ giải thích từ theo thứ tự từ 1 tới 8 tương ứng với các menu được đánh số như hình trên nhé.

(1) : bạn có thể tìm kiếm font chữ bằng từ khóa liên quan hoặc gõ trực tiếp tên font chữ tại đây

(2) : thay vì text mẫu hiển thị trong khung từng loại font chữ như hình trên bạn có thể gõ text bất kì bằng ngôn ngữ tương ứng tại đây.Toàn bộ text mẫu sẽ được thay thế ngay lập tức để bạn có thể theo dõi font chữ mình lựa chọn sẽ hiển thị như thế nào

(3) : bạn có thể thay đổi kích thước chữ mẫu hiển thị trong mỗi khung font chữ tại đây bằng cách lựa chọn từ menu đổ xuống hoặc kéo thanh trượt

(4) : lựa chọn họ phông chữ mà bạn muốn sử dụng

(5) : lọc font chữ theo ngôn ngữ

(6) : chọn thuộc tính của font chữ

(7) : thay đổi cách hiển thị của khung font chữ hiện tại, có hai lựa chọn là Grid và List

(8) : sắp xếp các ngôn ngữ thỏa các điều kiện trên theo thứ tự nào đó mà bạn muốn.

  • Trending : theo xu hướng
  • Most Popular : theo sự phổ biến
  • Newest : theo thứ tự mới đến cũ
  • Name : theo thứ tự chữ cái

Lấy Google Fonts làm font chữ cho website

Để lấy font chữ nào đó và đưa nó vào trong website sử dụng bạn hãy nhấn trực tiếp vào khung font chữ.Ví dụ ở đây mình lựa chọn font chữ Roboto.

sử dụng Google Fonts phiên bản mới 2020 01

Sử dụng Google Fonts phiên bản mới 2020 – Select styles

Khi nhấn vào khung font chữ ngay lập tức một màn hình mới hiện ra và hiển thị mọi thông tin về font chữ mà bạn đã chọn.Mình có đánh số thứ tự như hình trên và mình sẽ giải thích chi tiết theo thứ tự này nhé.

(0) : là danh sách các menu chứa thông tin tương ứng liên quan đến font chữ

  • Select Styles : toàn bộ thông tin về các kiểu định dạng của font chữ
  • Glyphs : bảng danh sách chữ cái, chữ số và kí tự đặc biệt tương ứng với font chữ
  • About : thông tin về font chữ và tác giả đã sáng tạo ra nó
  • License : thông tin liên quan đến bản quyền font chữ
  • Pairings : một số gợi ý những font chữ khác có thể kết hợp với font chữ hiện tại bạn đã chọn

(1) : thay đổi đoạn text mẫu tại đây

(2) : thay đổi kích thước font chữ

(3) : trong rất nhiều loại định dạng của font chữ có sẵn bạn hãy chọn ra một định dạng mà bạn muốn sử dụng bằng cách nhấn vào menu có tên “+ Select this style“.

(4) : bạn có thể download font chữ về máy tính và sử dụng

Sau khi đã lựa chọn được định dạng font chữ muốn sử dụng và nhấn vào menu “+ Select this style“, phía bên phải màn hình sẽ xuất hiện thêm một số lựa chọn như hình dưới đây.

Nếu màn hình con phía bên phải không hiện ra như hình dưới đây bạn hãy nhấn vào icon ngay bên cạnh menu “Download family“.

Bạn lưu ý là bạn có thể lựa chọn một lúc nhiều định dạng font chữ nhé.

Sử dụng Google Fonts phiên bản mới 2020 02

Sử dụng Google Fonts phiên bản mới 2020 – Review

Tại định dạng font chữ mà bạn đã lựa chọn sẽ có xuất hiện dòng chữ màu xám “– Remove this style” để bạn có thể tiến hành xóa đi lựa chọn của mình.

Ở menu Review sẽ hiển thị thông tin về định dạng font chữ mà bạn đã lựa chọn.Bạn cũng có thể nhấn vào dấu “-” như mình khoanh tròn màu xanh ở hình trên để xóa đi lựa chọn định dạng font chữ mà bạn đã lựa chọn.

Giờ trong màn hình con phía bên phải bạn hãy chuyển qua menu Embed để lấy font chữ về sử dụng.Có hai cách để lấy font chữ về và sử dụng trong website đó là thông qua thẻ <link> và thông qua @import.

Sử dụng thẻ <link>

Sử dụng Google Fonts phiên bản mới 2020 03

Sử dụng Google Fonts phiên bản mới 2020 – Embed

Cách đầu tiên là sử dụng thẻ <link>, bạn hãy copy toàn bộ thẻ <link> trong màn hình con phía bên phải sau đó dán nó vào trong thẻ <head> của tập tin HTML như hình dưới đây.

sử dụng google fonts ảnh 5

Để gọi font chữ này ra bạn chỉ việc khai báo tên font chữ bên trong thuộc tính font-family là xong.Tên font chữ bạn có thể thấy nó ngay ở “CSS rules to specify families” bên dưới thẻ <link> ở màn hình con phía bên phải.

Ví dụ như hình trên đây mình gọi font chữ Lobster ra và áp dụng nó cho thẻ tiêu đề <h1>.

Sử dụng @import

Sử dụng Google Fonts phiên bản mới 2020 04

Sử dụng Google Fonts phiên bản mới 2020 – Embed @import

Cách thứ hai đó là sử dụng @import.Bạn copy toàn bộ thông tin bên trong thẻ <style> như ở hình trên rồi dán nó vào phía đầu tiên bên trong tập tin CSS.

sử dụng google fonts ảnh 6

Tiếp theo bạn chỉ cần khai báo tên font chữ bạn muốn sử dụng bên trong thuộc tính font-family rồi gắn nó vào trong yếu tố bạn muốn áp dụng là ok.

**Hai hình ảnh ví dụ phía trình soạn thảo code ở trên bạn thấy tên font chữ không phải là Roboto vì đây là hình ảnh mình tái sử dụng ở bài viết phiên bản cũ.Cách thao tác hoàn toàn tương tự và không có gì thay đổi nhé.**

Làm quen với một số menu khác

Sử dụng Google Fonts phiên bản mới 2020 05

Sử dụng Google Fonts phiên bản mới 2020 – Glyphs

Bảng chữ cái, số và các kí tự đặc biệt tương ứng với font chữ mà bạn đã chọn sẽ hiển thị tại đây.

Sử dụng Google Fonts phiên bản mới 2020 06

Sử dụng Google Fonts phiên bản mới 2020 – About

Thông tin cụ thể về font chữ cũng như tác giả của nó cũng sẽ được hiển thị riêng trong một menu có tên là About mà mình đã nói đến ở trên.

Sử dụng Google Fonts phiên bản mới 2020 07

Sử dụng Google Fonts phiên bản mới 2020 – License

Bên cạnh đó thông tin cụ thể về bản quyền cũng sẽ được viết rất rõ ràng để cho những doanh nghiệp hay cá nhân khi sử dụng có thể yên tâm.

Sử dụng Google Fonts phiên bản mới 2020 08

Sử dụng Google Fonts phiên bản mới 2020 – Pairings

Cuối cùng là phần Pairings.Đây là nơi hiển thị những font chữ khác thường được sử dụng chung với font chữ hiện tại mà bạn đang chọn.Bạn có thể thay đổi định dạng font chữ của cả hai loại này ở menu mà mình đã khoanh đỏ trong hình trên.

Khi tìm được tổ hợp font ưng ý rồi bạn chỉ việc nhúng chúng vào website để sử dụng.Rất tiện lợi phải không nào.

Chọn nhiều loại font chữ một lần

Bạn có thể lấy một lúc nhiều font chữ và gọi chúng ra khi muốn sử dụng bằng cách quay trở về màn hình chính tìm tiếp font chữ khác và thực hiện các thao tác như mình đã hướng dẫn ở trên.

Sử dụng Google Fonts phiên bản mới 2020 09

Sử dụng Google Fonts phiên bản mới 2020 – Lấy nhiều font chữ một lần

Như hình ảnh ví dụ trên đây mình có lựa chọn 3 font chữ ngẫu nhiên và thêm vào danh sách font chữ muốn sử dụng.

Sử dụng Google Fonts phiên bản mới 2020 10

Sử dụng Google Fonts phiên bản mới 2020 – Lấy nhiều font chữ một lần ảnh 2

Sau khi lựa chọn font chữ xong thì bên phía code của Embed cũng sẽ được tự động cập nhật theo.Bạn chỉ việc copy về và sử dụng mà thôi.

Kết luận

Vậy là thông qua bài viết này mình đã hướng dẫn chi tiết cho các bạn cách sử dụng Google Fonts phiên bản mới nhất năm 2020.Hi vọng bạn sẽ thích và sớm thành thạo sử dụng giao diện người dùng mới này của Google Fonts.

Nếu bạn muốn quay về sử dụng phiên bản cũ thì có thể tham khảo ở một bài viết khác trên blog của mình.

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x