Hướng dẫn cách xài Google Font làm WebFont cho website

Trong quá trình thiết kế website chắc hẳn bạn sẽ gặp những website có những font chữ uốn lượn! Đó là do chủ đích của chủ sở hữu website muốn thiết kế như vậy và khiến cho người vẽ giao diện cũng phải chiều theo ý muốn.

Tuy nhiên có một điều là không phải bạn mang font dùng trong photoshops tức là từ bản vẽ ra áp dụng ngay được cho website của bạn mà bạn phải trải qua một số thủ thuật mới xử lý được.

Để khắc phục tình trạng đó Google đã cho ra mắt bộ Font dành cho website, hỗ trợ trên tất cả cá trình duyệt tại địa chỉ: https://fonts.google.com/. Với địa chỉ này đáng tin cậy cho bạn xài bất cứ lúc nào. Nhưng để sử dụng nó thì không phải ai cũng rành nó. Để sử dụng nó thì hôm nay Thịnh hướng dẫn các bạn tìm font trên đó cũng như thêm chúng vào website của bạn.

Lưu ý: Với Google Font bạn cần xác định website của bạn là ngôn ngữ nào để tìm kiếm font google hỗ trợ ngôn ngữ đó.

Sau đây mình hướng dẫn các bạn thao tác đối với việc sử dụng Font tiếng Việt.

Đầu tiên bạn truy cập địa chỉ: https://fonts.google.com/
Tiếp đến bạn tiến hành tìm kiếm Font mà Google hỗ trợ dành cho tiếng Việt.
Bạn cần chọn đúng ngôn ngữ tiếng Việt
Nó sẽ ra dánh cách font hỗ trợ và cả mẫu demo cùng tính năng chọn lấy font.
Tiếp đến bạn bấm vào nút dấu cộng màu đỏ ở khu vực thêm mà ban muốn chọn để mở ra cửa sổ thông báo của Google Font kèm link nhúng.
Nó sẽ hiển thị cửa sổ nhỏ bên dưới và bạn mở nó lên.
Sau khi mở lên bạn có 2 phương án nhúng Google Font
- Cách 1: nhúng vào trong thẻ <head> của mã html mở đầu của website.
- Cách 2: nhúng trực tiếp vào trong file css

Cách 1: Chèn đường dẫn link Google Font vào trong cặp thẻ html <head>.

Trong phần “STANDARD” như hình dưới bạn chọn phần khoanh đỏ tiếp theo, copy chúng
Tiếp đến bạn mở file hiển thị phần mở đầu website tìm tới dòng mở đầu có lệnh <head> hoặc trước lệnh </head>
Bạn dán đoạn mà bạn vừa copy vào đó.
Trong file css bạn khai báo font-family như hình trên là nó sẽ tự hiểu lấy link Google Font và hiển thị font mới theo khai báo của bạn.

Cách 2: nhúng trực tiếp vào trong file css

Trong phần “@IMPORT” bạn chọn nó nó sẽ ra như hình sau.
Tại đây bạn copy đoạn mã @import url(… như trong khoanh màu đỏ trên.
Sau đó bạn dán nó vào đầu file style.css hoặc file .css bất kỳ miễn là file đó luôn được gọi ở bất kỳ trang nào của website.
Tiếp đến trong css bạn khai báo font-family như hình trên nhưng là Google Font mà bạn chọn.

Ưu điểm của việc sử dụng link google font:

Tiếp kiệm thời gian ngồi viết code.
Font chuẩn.
Giảm số dòng lệnh viết khi nhúng Font cho web.

Nhược điểm:

Khi mạng kém chập trờn thì load link google font rất lâu dẫn đến bể website.
Phụ thuộc vào máy chủ bên Google cung cấp link font.
Tăng thời gian load site.

Đó là chia sẻ của mình, ở bài tiếp theo mình sẽ hướng dẫn các bạn về vấn đề dùng font riêng nhúng vào web thay vì dùng của bên thứ 3.

Sử dụng Google Font làm Font cho website của bạn

Có liên quan

Tác giả: Thịnh Nguyễn

0 bình luận

Để lại bình luận của bạn

Bài viết liên quan

Hướng dẫn đăng ký Google để tạo key API Google Map

Hướng dẫn sử dụng Font Awesome làm icon cho menu nukeviet

Hướng dẫn khắc phục thiếu homeLocation trong Google Webmaster Tools

Chia sẻ: