Cách sử dụng Google Fonts trên trang web

Giới thiệu

Google Fonts cung cấp hơn 1.400 font chữ miễn phí, open-source, tải nhanh qua CDN toàn cầu. Việc tích hợp đúng cách giúp website đẹp, chuyên nghiệp mà không lo licensing.

3 Cách tích hợp Google Fonts

Cách 1: Link trong <head> (Khuyến nghị - đơn giản nhất)

<head>
    <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@300;400;500;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
</head>

Giải thích:

preconnect: Thiết lập kết nối sớm đến domain fonts, giảm latency.
family=: Tên font (có dấu + thay space). Có thể thêm nhiều font cách nhau bởi &family=.
wght@300;400;500;700: Chỉ tải các weight cần thiết (giảm kích thước file).
display=swap: Hiển thị font fallback ngay lập tức, swap sang Google Font khi tải xong (tránh FOIT - Flash of Invisible Text).

Cách 2: @import trong CSS

<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
    body { font-family: 'Roboto', sans-serif; }
</style>

Nhược điểm: Chặn render CSS (blocking), tải chậm hơn cách 1. Không khuyến nghị cho production.

Cách 3: Tự host (Self-hosting) - Tối ưu hiệu năng nhất

Tải font từ google-webfonts-helper (chọn charset, format woff2).
Đặt file .woff2 vào thư mục /fonts/ dự án.
Khai báo @font-face trong CSS:

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2');
}

Ưu: Không request bên ngoài, kiểm soát cache, offline-capable, GDPR friendly. Nhược: Cần dung lượng server, setup phức tạp hơn.

Ví dụ sử dụng trong CSS

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; }

Luôn khai báo font fallback stack (system fonts) để hiển thị ngay trước khi Google Font load xong.

Ví dụ hoàn chỉnh (Cách 1 - Link)

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Google Fonts Demo</title>
    <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=Permanent+Marker&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 1.7; padding: 2rem; max-width: 800px; margin: 0 auto; }
        h1 { font-family: 'Permanent Marker', cursive; font-size: 3rem; color: #2c3e50; margin-bottom: 1rem; }
        .note { font-weight: 300; color: #666; font-style: italic; }
    </style>
</head>
<body>
    <h1>Google Fonts Example</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="note">Font chữ Permanent Marker cho tiêu đề, Roboto cho nội dung.</p>
    <h2>1 2 3 4 5 6 7 8 9 10</h2>
</body>
</html>

Tối ưu hiệu năng (Performance Tips)

Chỉ tải weight/style cần dùng: Mỗi weight thêm ~20-30KB (woff2).
Subset font: Chỉ lấy ký tự Latin (latin, latin-ext) nếu không cần tiếng Việt có dấu nhiều, hoặc dùng &subset=vietnamese.
Preload font quan trọng: <link rel="preload" as="font" href="..." crossorigin> cho font heading.
Font-display: swap: Luôn dùng (mặc định ở display=swap).
Variable Fonts: 1 file chứa mọi weight (VD: Roboto Flex) - tiết kiệm request.