Google Fonts

UI/UX

UI/UXMiễn phíĐộ khó: Dễ

Google Fonts

4.5/5Đánh giá của 2dm

Nhiều font miễn phí, có font hỗ trợ tiếng Việt tốt.

Thư viện font miễn phí, nhiều font hỗ trợ đầy đủ tiếng Việt.

Mở trang chính thức Xem cách dùng

Giới thiệu

Google Fonts là thư viện font chữ dùng cho web và thiết kế, với các font được cấp phép cho phép phân phối lại. Phần lớn font dùng giấy phép SIL Open Font License, một số dùng Apache 2 hoặc Ubuntu Font License, và mỗi font có file giấy phép riêng.

Cách dùng phổ biến nhất là chèn một thẻ link tới CSS API của Google vào trang web rồi khai báo tên font trong CSS. Vì giấy phép cho phép phân phối lại, bạn cũng có thể tự host font trên máy chủ của mình.

Với doanh nghiệp Việt, điểm quan trọng là chọn font có hỗ trợ tiếng Việt. Ví dụ, khi gọi font Be Vietnam Pro qua CSS API, Google trả về cả bộ ký tự vietnamese, giúp chữ có dấu hiển thị đúng.

Tính năng nổi bật

Giấy phép mở

Phần lớn font dùng SIL Open Font License, cho phép phân phối lại theo điều khoản.

Nhúng nhanh bằng CSS API

Chỉ cần một thẻ link tới fonts.googleapis.com là dùng được trên website.

Hỗ trợ font biến thiên

CSS API v2 cho phép gọi dải độ đậm, ví dụ wght@200..900.

Tối ưu tốc độ tải

Tham số display=swap điều khiển cách hiển thị chữ khi font đang tải, tham số text= tạo file font nhỏ cho logo hoặc tiêu đề.

Có thể tự host

Giấy phép cho phép tải font về và phục vụ từ máy chủ riêng.

Có bộ ký tự tiếng Việt

Nhiều font có subset vietnamese để hiển thị chữ có dấu.

Dùng để làm gì

Website doanh nghiệp

Chọn font tiêu đề và nội dung hỗ trợ tiếng Việt để trang chuyên nghiệp, dễ đọc.

Ấn phẩm marketing

Dùng cùng font trên website, banner, slide để thống nhất nhận diện.

Landing page tải nhanh

Nhúng font với display=swap để chữ hiện ngay, không bị trang trắng chờ font.

Logo và tiêu đề

Dùng tham số text= để chỉ tải đúng các ký tự cần dùng.

Cách dùng

1
Chọn font hỗ trợ tiếng Việt
Tìm font trên fonts.google.com và kiểm tra font có bộ ký tự tiếng Việt.
2
Nhúng vào trang
Thêm thẻ link tới https://fonts.googleapis.com/css2?family=Tên+Font&display=swap vào phần head.
3
Khai báo trong CSS
Đặt font-family bằng tên font, kèm font dự phòng như sans-serif ở cuối.
4
Tối ưu khi cần
Chỉ gọi đúng các độ đậm cần dùng, hoặc tự host font để chủ động về tốc độ.

Video hướng dẫn

Using Fonts in Next.js (Google Fonts, Local Fonts, Tailwind CSS)
leerob

Ví dụ thực tế

Tình huống minh hoạ

Một thương hiệu cà phê rang xay ở Buôn Ma Thuột làm lại website và nhận thấy font cũ hiển thị lỗi dấu tiếng Việt. Người làm web chọn trên Google Fonts một font có bộ ký tự vietnamese cho nội dung và một font khác cho tiêu đề, nhúng bằng CSS API kèm display=swap, rồi dùng cùng hai font đó trên banner và menu in để thương hiệu đồng nhất.

Mẹo & lưu ý

Luôn thử chữ có dấu
Gõ thử câu tiếng Việt đầy đủ dấu trước khi chốt font.
Đọc giấy phép từng font
Mỗi font có giấy phép riêng, hãy kiểm tra trước khi dùng cho mục đích thương mại hoặc chỉnh sửa font.
Giới hạn số độ đậm
Gọi ít độ đậm hơn giúp trang tải nhanh hơn.
Luôn có font dự phòng
Thêm sans-serif hoặc serif ở cuối font-family phòng khi font web không tải được.