Hướng dẫn tích hợp font chữ google vào website

Tri thức / Lập trình / Lập trình web / Html & Css      79 - 0      28 ngày trước
Hướng dẫn tích hợp font chữ google vào website
0 0

Thông thường, mỗi website đều sẽ lựa chọn một hoặc vài font chữ làm chủ đạo. Chúng ta có thể sử dụng font chữ mặc định hoặc tự tải và thiết lập font chữ mang tính chất đặc trưng. Có rất nhiều thư viện hỗ trợ font chữ cho website, và google font là một thư viện nổi bật nhất, đặc biệt là còn hoàn toàn miễn phí. Bài học hôm nay, chúng ta sẽ xem cách áp dụng google font để tuỳ chỉnh font chữ cho website.

 

Khai báo và sử dụng thư viện google font

Thật may khi sử dụng các thư viện google, ở chỗ chúng đều có hướng dẫn rất chi tiết. Chúng ta truy cập fonts.google.com để xem các font chữ mới nhất và cách áp dụng.

 

Truy cập đường dẫn trên, chúng ta sẽ thấy rất nhiều font với các chữ mẫu đi kèm

 

Nhiệm vụ của chúng ta là tìm font chữ mình ưng ý, rồi nhấn vào dấu cộng màu đỏ tương ứng để chọn

 

Khi chọn xong, nhìn phía dưới màn hình duyệt web, ta sẽ thấy font chữ mình đã chọn như hình

 

Nhấn vào để mở rộng các font chữ đã chọn, chúng ta sẽ nhìn thấy các tuỳ chọn mở rộng và hướng dẫn tích hợp như hình dưới

 

Nhấn vào tab customize để thêm thêm các tuỳ chỉnh

Tuỳ chỉnh độ đậm nhạt của nét chữ

 

Tuỳ chỉnh ngôn ngữ

Trong trường hợp muốn hiển thị được tiếng việt thì chúng ta phải tick chọn vào mục vietnamese như hình trên.

 

Quay lại tab embed để xem hướng dẫn chèn font đã chọn, ứng với các tuỳ chọn tương ứng

Copy thẻ link như hình và đặt vào thẻ head trong trang html.

Khi muốn hiển thị font chữ đã chọn, chúng ta khai báo thêm style css như hình trên.

Ví dụ, nếu muốn toàn bộ website đều hiển thị font roboto như trong trường hợp mẫu, chúng ta sẽ viết code css như sau:

*{
    font-family: 'Roboto', sans-serif;
}

 

Vậy là chúng ta vừa hoàn tất bài học về sử dụng font google để áp dụng font chữ ưng ý cho website của mình. Bài học sau chúng ta sẽ tìm hiểu cách sử dụng thư viện font awesome để tạo các icon cho website. Hãy đồng hành cùng tủ tri thức để khám phá thêm về lập trình website.

Tạo vào 2019-10-23 07:16:30, Cập nhật 28 ngày trước
TuTriThuc.com TuTriThuc.com Theo dõi 1
Chia sẻ Hướng dẫn tích hợp font chữ google vào website tới bạn bè để mọi người cùng đọc nhé !
Bình luận
Top phản hồi
Đang tải bình luận bài viết Phản hồi bài viết Hướng dẫn tích hợp font chữ google vào website
Gửi đi
Bạn đang đọc bài viết Hướng dẫn tích hợp font chữ google vào website , hãy để nguồn tutrithuc.com khi phát hành lại nội dung này !
37703
0.090721130371094