Bước 1: Chọn font tại Google Fonts

Truy cập kho font của Google và duyệt qua hàng trăm kiểu chữ – có thể lọc theo ngôn ngữ, độ dày, kiểu chữ hoặc hỗ trợ tiếng Việt:

Đến Google Fonts

Bước 2: Lấy mã nhúng

Sau khi chọn font, nhấn nút “Get embed code” để lấy mã nhúng HTML. Tại đây, bạn nên bỏ chọn các kiểu chữ không cần dùng (italic, extra bold, etc.) để giảm dung lượng tải về và tăng tốc độ web.

Ví dụ mã nhúng font Roboto

<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:wght@400;700&display=swap" rel="stylesheet">

Sau đó dùng trong CSS như sau:

font-family: "Roboto", sans-serif;

Mẹo tối ưu hiệu suất

• Sử dụng thẻ rel="preconnect" để tăng tốc tải font (như ví dụ ở trên).
• Chỉ chọn 1–2 font chính, hạn chế gọi nhiều font cùng lúc.
• Sử dụng biến &display=swap để tránh render blocking khi font chưa tải xong.
• Nếu cần tối ưu tối đa, có thể tải Google Fonts về và host cục bộ (self-hosting).

Tổng kết

Google Fonts là công cụ đơn giản mà hiệu quả để nâng cấp giao diện web. Tuy nhiên, bạn vẫn nên cân nhắc chọn font hợp lý để giữ tốc độ tải trang nhanh và trải nghiệm người dùng mượt mà.

Chúc bạn áp dụng thành công và làm web đẹp – nhẹ – nhanh!