Top 20 Google Fonts đẹp cho trang web

Top 20 Google Fonts đẹp cho trang web

Bài viết sẽ đưa ra nhận định về Top 20 Google Fonts đẹp cho trang web. Nào bắt đầu thôi!

Hiện nay, Web Typography ngày càng phát triển, nhu cầu sử dụng đa dạng các font chữ ngày càng gia tăng. Có rất nhiều thư viện fonts nhưng phổ biến nhất vẫn là Google Fonts. Không chỉ bởi tính đa dạng, đây là thư viện mã nguồn mở, an toàn, nhanh và miễn phí.

Google Fonts là gì?

Google Fonts là một nguồn tài nguyên vô giá cho các nhà thiết kế kỹ thuật số, lập trình viên, mã nguồn mở, phù hợp cho mục đích cá nhân và thương mại. Là một công cụ của Google, Google Fonts sẽ nhận được các bản cập nhật và sự hỗ trợ rất nhiệt tình từ phía Google. Font thường rất dễ đọc, chất lượng cao cho cả phiên bản desktop và mobile.

Ưu điểm của Google Fonts?

Chỉ cần thiết bị có kết nối mạng là có thể truy cập vào tài nguyên của Google Fonts từ trên đám mây. Bạn không cần sử dụng bất cứ một bộ cài đặt nào để lưu trữ nó.

Mọi thứ đều miễn phí nên bạn không cần phải quan tâm đến chi phí phải bỏ ra khi sử dụng nó. Hãy sử dụng nó trong các dự án của bạn. Đừng bao giờ lấy font chữ mang đi mua bán vì làm như vậy là vi phạm quyền của Google.

Cú pháp đơn giản, chỉ cần vài thao tác từ tìm font, chọn kích thước rồi copy/paste là bạn đã có ngay kho tàng Google Fonts đẹp để sử dụng.

Cách sử dụng Google Fonts?

Để nhúng Google Fonts vào trang web, bạn cần copy thẻ <link> mà Google Fonts tạo ra cho font đó vào trong thẻ <head> ở file HTML:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">Code language: HTML, XML (xml)

Hoặc bạn có thể dùng thuộc tính @import của CSS để thay thế:

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>Code language: HTML, XML (xml)

Sau đó, bạn phải định danh font chữ đó bằng CSS:

font-family: 'Roboto', sans-serif;Code language: JavaScript (javascript)

Sau khi hoàn thành các bước trên là bạn có thể sử dụng font từ Google Fonts rồi.

Xem thêm về Google Fonts tại đây!

Top 20 Google Fonts đẹp cho trang web

Dưới đây là Top 20 Google Fonts đẹp cho trang web mà bạn cần biết khi sử dụng nó. Danh sách này được sắp xếp ngẫu nhiên vì vậy thứ tự của các Google Fonts không thể hiện vị trí của chúng.

Roboto

Top 20 Google Fonts đẹp cho trang web

BioRhyme

Top 20 Google Fonts đẹp cho trang web

Playfair Display

Top 20 Google Fonts đẹp cho trang web

Archivo

Top 20 Google Fonts đẹp cho trang web

Cormorant

Top 20 Google Fonts đẹp cho trang web

Spectral

Top 20 Google Fonts đẹp cho trang web

Raleway

Top 20 Google Fonts đẹp cho trang web

Work Sans

Top 20 Google Fonts đẹp cho trang web

Lato

Top 20 Google Fonts đẹp cho trang web

Anton

Top 20 Google Fonts đẹp cho trang web

Old Standard TT

Top 20 Google Fonts đẹp cho trang web

Oswald

Top 20 Google Fonts đẹp cho trang web

Montserrat

Top 20 Google Fonts đẹp cho trang web

Poppins

Top 20 Google Fonts đẹp cho trang web

Nunito

Top 20 Google Fonts đẹp cho trang web

Source Sans Pro

Top 20 Google Fonts đẹp cho trang web

Oxygen

Top 20 Google Fonts đẹp cho trang web

Open Sans

Top 20 Google Fonts đẹp cho trang web

Inter

Top 20 Google Fonts đẹp cho trang web

Lora

Top 20 Google Fonts đẹp cho trang web

Kết luận

Trên đây là Top 20 Google Fonts đẹp cho trang web mà bạn nên biết. Tuy nhiên, mỗi người sẽ có một quan điểm, cách nhìn nhận vấn đề và gu thẩm mỹ khác nhau. Mình không đánh đồng rằng những font chữ trên phải đẹp với bất cứ ai.

Về cái nhìn khách quan, mỗi font chữ sẽ có điểm mạnh và cái hay riêng. Tuỳ từng trường hợp mà chúng ta sẽ đưa ra các quyết định sử dụng font chữ sao cho hợp lý nhất!

Cảm ơn bạn đã theo dõi bài viết. Chúc bạn sớm tìm được font theo ý muốn của mình!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Leave a Reply

Your email address will not be published. Required fields are marked *