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

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.