sử dụng google fonts

Hướng dẫn sử dụng Google Fonts để lấy font chữ9 phút đọc

Trong quá trình làm website có những lúc bạn sẽ rất đau đầu khi lựa chọn ra một font chữ phù hợp cho website của mình.

Phần lớn những website lớn hiện nay đều sử dụng những font chữ phổ biến tương tự nhau để người dùng dễ đọc dễ nhìn hơn từ đó tăng trải nghiệm người dùng.

Tuy nhiên nếu website của bạn mang tính cá nhân và bạn muốn nó có một phong cách riêng thì bạn nên sử dụng những font chữ đặc biệt ít đụng hàng là tốt nhất.

Tạo ra một font chữ không hề đơn giản và tải miễn phí một font chữ nào đó cũng không phải chuyện dễ dàng, nếu không cẩn thận bạn có thể rước virus về website của mình.

Sử dụng Google Fonts là sự lựa chọn hàng đầu khi nó là thư viện font chữ lớn nhất trên thế giới với rất rất nhiều font chữ tuyệt vời mà hoàn toàn miễn phí.

Bạn có thể nói không với virus, yên tâm về tốc độ tải font chữ cũng như cách sử dụng đa dạng đơn giản đến bất ngờ khi sử dụng Google Fonts.

Bạn hãy nhấn vào ảnh bất kì trong bài viết để xem nó ở chế độ mở rộng (Lightbox)

Google Fonts mới cập nhật giao diện

Gần đây Google Fonts mới cập nhật giao diện mới và mình đoán là nhiều bạn sẽ cảm thấy bỡ ngỡ với giao diện mới này.Giao diện mới được thiết kế theo phong cách tối giản và cung cấp nhiều thông tin cũng như lựa chọn hơn trong một font chữ.

Khi vừa truy cập vào trang chủ của Google Fonts bạn sẽ thấy giao diện hiện tại tương tự như hình dưới đây.

sử dụng Google Fonts với giao diện mới

Giao diện người dùng này khó sử dụng hơn phiên bản cũ nên bạn có thể quay trở về giao diện của phiên bản cũ bằng cách nhấn vào menu “Return to classic site” như vùng mình khoanh đỏ ở hình trên đây.

Sau khi quay về giao diện phiên bản cũ thì cách sử dụng sẽ như trước đây và dưới đây là cách thao tác chi tiết để các bạn tham khảo.

Nếu bạn muốn sử dụng phiên bản giao diện mới thì hãy tham khảo bài viết mà mình để link ngay bên dưới đây.

Làm quen với giao diện sử dụng Google Fonts

Để sử dụng Google Fonts bạn truy cập vào website của Google Fonts và lựa chọn font chữ mình mong muốn trước.Mình có để link dưới đây bạn có thể truy cập luôn nếu cần.

 

Sau khi truy cập trang chủ của Google Fonts bạn sẽ thấy màn hình giao diện website như hình dưới đây.Mình có đánh số theo thứ tự từ trái sang phải và sẽ giải thích từng phần một.sử dụng google fonts ảnh 1

Nếu bạn đang xem một website nào đó, thấy font chữ website đó đẹp và muốn sử dụng font chữ đó cho website của mình.Bạn hãy sử dụng một số công cụ của Google Chrome chẳng hạn, tìm ra tên font chữ website đó đang dùng.Khả năng cao là font chữ đó sẽ có trên thư viện của Google Fonts.

Để kiểm tra font chữ đó có trên thư viện của Google Fonts hay không bạn chỉ việc gõ tên font chữ bạn muốn tìm kiếm vào ô “Search fonts“.  (1)

Tiếp theo thay vì hiển thị nội dung chữ mẫu với nội dung mặc định bạn hoàn toàn có thể thay đổi theo ý mình muốn bằng cách gõ nội dung chữ vào ô “Type something“. (2)

Khi toàn bộ nội dung chữ mẫu hiển thị theo ý bạn thì bạn sẽ nhanh chóng tìm ra font chữ phù hợp với chủ đề của website mình hơn.

Bạn cũng có thể thay đổi kích thước chữ mẫu tùy ý bằng cách kéo thanh trượt hoặc lựa chọn kích cỡ chữ có sẵn từ menu đổ xuống. (3)

Với sự linh hoạt trong thay đổi kích thước chữ bạn chắc chắn sẽ biết font chữ nào phù hợp để làm các thẻ tiêu đề website của mình một cách dễ dàng.

Giao diện website của Google Fonts hiện tại là màu trắng chữ đen nhưng bạn hoàn toàn có thể thay đổi thành nền đen chữ trắng để phù hợp với môi trường làm việc của mình hơn. (4)

Nếu bạn muốn đổi cách hiển thị các khung chữ mẫu thành dạng danh sách thì bạn có thể nhấn vào icon hình danh sách để thay đổi. (5)

Trong quá trình tìm kiếm font chữ bạn có thể tùy chỉnh về kích cỡ màu sắc nội dung và đến lúc nào đó có thể bạn sẽ muốn reset để nó tất cả thiết lập trở về trạng thái ban đầu.

Lúc này bạn chỉ việc nhấn vào icon có hình mũi tên xoay là mọi thiết lập sẽ về trạng thái ban đầu. (6)

Bạn muốn tìm font chữ mong muốn theo họ font thì hãy chọn họ font chữ tại menu đổ xuống của “Categories“. (7)

Một trong những lựa chọn quan trọng nhất đó chính là ngôn ngữ cho font chữ.Bạn có thể làm việc này dễ dàng bằng cách chọn ngôn ngữ từ menu đổ xuống “Language“. (8)

Phần menu “Font Properties” là nơi bạn lựa chọn những thuộc tính cho font chữ nhưng mình nghĩ phần này nên để mặc định chứ không nên chỉnh sửa gì cả. (9)

Sắp xếp font chữ theo xu hướng, độ phổ biến hay mới nhất là những gì mà menu “Sort by” sẽ giúp bạn. (10)

Sử dụng Google Fonts làm font chữ cho website

Ví dụ sau khi nhập ngôn ngữ cho font chữ muốn tìm là tiếng Việt và sau một hồi tìm kiếm mình thấy font chữ  Lobster như hình dưới rất đẹp phù hợp để làm thẻ tiêu đề cho website.

sử dụng google fonts ảnh 2

Để lấy font chữ này về website sử dụng thì mình nhấn vào nút hình dấu cộng phía trên góc phải của font chữ để thêm nó vào danh sách chọn.

Một thanh ẩn màu đen sẽ xuất hiện phía dưới màn hình của bạn và bạn kích vào nó để nó hiện lên đầy đủ thông tin như hình dưới đây.

sử dụng google fonts ảnh 3

Để đưa font chữ của Google Fonts vào website thì ta có hai cách đó là đưa vào theo kiểu STANDARD@IMPORT

Sử dụng Google Fonts cách 1

Trước tiên mình sẽ hướng dẫn các bạn đưa font chữ vào website theo kiểu STANDARD trước.

Tại tab STANDARD bạn copy phần thẻ <link> và thuộc tính font-family trong “Specify in CSS“.

sử dụng google fonts ảnh 5

Bạn dán thẻ <link> vào trong thẻ <head> và gắn thuộc tính font-family vào bất kì thẻ nào mà bạn muốn áp dụng font chữ này.

Như hình trên thì mình chỉ áp dụng font chữ này cho thẻ <h1> thôi và kết quả như hình dưới đây.

sử dụng google fonts ảnh 8

Sử dụng Google Fonts cách 2

Cách tiếp theo để đưa Google Fonts vào website đó là dùng @IMPORT.

sử dụng google fonts ảnh 4

Giống như với cách trên nhưng bạn chuyển qua tab @IMPORT rồi copy đoạn mã trong thẻ <style> và thuộc tính font-family.

sử dụng google fonts ảnh 6

Bạn dán phần mã trong thẻ style vào tập tin .css của bạn và gắn thuộc tính font-family cho những thẻ mà bạn muốn áp dụng font chữ này.

Ví dụ như hình trên mình sẽ áp dụng nó cho thẻ <h2> và có kết quả như hình dưới đây.

sử dụng google fonts ảnh 7

Bạn chú ý với cách @IMPORT thì bạn hoàn toàn có thể copy luôn cả thẻ và nội dung thẻ <style> rồi đưa vào file HTML như cách STANDARD rồi gắn thuộc tính font-family cho yếu tố bạn muốn.

Tuy nhiên mình đưa nội dung thẻ <style> vào file .CSS vì cách này thường dùng trong thực tế hơn rất nhiều nên mình muốn giới thiệu đến các bạn để áp dụng nó vào công việc.

Sử dụng Google Fonts làm font chữ cho máy tính / photoshop

Bạn có thể chọn một lúc nhiều font mà bạn muốn và tất cả các font chữ mà bạn đã chọn sẽ được đưa vào cùng một code.

Để loại bỏ font chữ nào đó bạn chỉ việc nhấn vào hình dấu trừ bên cạnh tên font chữ là được.

sử dụng google fonts ảnh 9

Mình có khoanh đỏ hai icon ở góc trên bên phải ở hình trên.

Icon hình mũi tên sang phải là icon sẽ đưa bạn đến màn hình thông tin chi tiết những font chữ mà bạn đã chọn.

Bạn có thể xem lại chi tiết và quyết định mình sẽ sử dụng font chữ nào sau khi xem lại một lượt.

Icon hình mũi tên cắm xuống là để download font chữ đó về máy và sử dụng cho máy tính hay những phần mềm khác như photoshop.

Khi tải về sẽ là file .zip nên các bạn nhớ giải nén ra để sử dụng nhé.

sử dụng google fonts ảnh 10

Bạn nào sử dụng máy MAC thì có thể vào “Launchpad” chọn tổ hợp ứng dụng “Khác” và nhấn vào “Sổ quản lý phông chữ“. <máy mình dùng ngôn ngữ tiếng Việt>

Bạn nhấn vào hình dấu cộng ở trên cùng màn hình và chọn file font chữ dạng .ttf muốn thêm vào.

Như hình trên là mình đã thêm font chữ Baloo từ Google Fonts vào máy tính và giờ mình có thể sử dụng font chữ này trên bất kì phần mềm nào.

Kết luận

Như bạn thấy việc sử dụng Google Fonts không hề khó nhưng lợi ích nó mang lại thì vô cùng lớn.Mình hi vọng qua bài viết này bạn sẽ có thêm nhiều sự lựa chọn cho font chữ trên website của mình bằng cách sử dụng Google Fonts.

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