Công Cụ Ghép Font Google

Về Công Cụ Ghép Font Google

Tìm kết hợp Google Fonts hoàn hảo cho dự án web của bạn. Xem trước ghép font tiêu đề và nội dung theo thời gian thực với nhiều loại nội dung và nhận mã CSS ngay lập tức.

Điều gì khiến hai phông chữ ghép tốt với nhau?

Cặp phông tốt mang lại tương phản trực quan trong khi vẫn duy trì sự hài hòa — thường bằng cách phối một serif và một sans-serif, hoặc hai phông có trọng lượng hoặc tỉ lệ khác biệt rõ ràng. Quy tắc kinh điển trong Elements of Typographic Style của Bringhurst là phối các phông cùng dòng của một nhà thiết kế (như Source Sans + Source Serif) hoặc các phông có chiều cao x và độ tương phản nét tương đương. Sai lầm thường gặp: phối hai phông trông giống nhưng không giống hệt tạo sự không nhất quán khó chịu, còn phối phông từ thời kỳ rất khác nhau (Garamond + Bebas) có thể rời rạc. Google Fonts có tab 'Pairings' cho mỗi phông gợi ý các cặp đã được cộng đồng thiết kế kiểm chứng.

Google Fonts API ảnh hưởng tốc độ tải trang ra sao?

Mỗi họ phông lấy từ `fonts.googleapis.com/css2` thêm một yêu cầu HTTP cùng tải về tệp WOFF2 (thường 15-40 KB mỗi trọng lượng). Trình duyệt không thể render văn bản bằng phông đó cho đến khi tệp về, gây Flash văn bản vô hình (FOIT) hoặc Flash văn bản không định kiểu (FOUT). Dùng `font-display: swap` trong CSS để hiển thị văn bản dự phòng ngay và đổi sang phông tùy chỉnh khi sẵn sàng — hiện là mặc định của Google Fonts. Tự host phông với header Cache-Control phù hợp có thể nhanh hơn CDN vì tránh được lookup DNS và kết nối riêng. Luôn preload phông quan trọng bằng `<link rel="preload" href="..." as="font" crossorigin>`.

font-display là gì và tôi nên dùng giá trị nào?

Bộ mô tả CSS `font-display` (CSS Fonts Module Level 4) điều khiển cách phông được render khi tải. Giá trị: `auto` (mặc định trình duyệt, thường chặn render), `block` (3 giây văn bản vô hình rồi đổi), `swap` (dự phòng ngay rồi đổi khi phông tải xong), `fallback` (100 ms vô hình rồi dự phòng, đổi nếu phông về trong 3s), `optional` (100 ms vô hình rồi dự phòng, không đổi). Tài liệu MDN khuyến nghị `swap` cho văn bản nội dung và `optional` cho phông biểu tượng không thiết yếu. Google Fonts mặc định `swap` từ 2019 để cải thiện điểm Core Web Vitals — thay đổi giảm First Contentful Paint trung bình ~150 ms trên web.

Một website nên dùng bao nhiêu phông?

Đồng thuận trong ngành là tối đa hai đến ba phông: một cho tiêu đề, một cho thân văn bản và tùy chọn một phông monospace cho mã hay số liệu. Mỗi phông thêm tăng kích thước trang (15-100 KB), yêu cầu HTTP và sự phức tạp thị giác. Các hệ thiết kế nổi tiếng đồng thuận: Material Design dùng Roboto + Roboto Mono, Apple Human Interface dùng SF Pro + SF Mono và IBM Carbon dùng IBM Plex. Phông biến đổi (CSS Fonts Module Level 4 `font-variation-settings`) cho phép tải một tệp nhưng dùng nhiều trọng lượng và kiểu, giảm tải đáng kể. Hãy cân nhắc Inter, Recursive hay Source Sans 3 — tất cả đều biến đổi, đều có giấy phép mở.

Google Fonts dùng giấy phép gì?

Tất cả phông trong thư viện Google Fonts được cấp phép theo SIL Open Font License 1.1 (OFL) hoặc Apache License 2.0, cả hai cho phép dùng thương mại và cá nhân tự do, chỉnh sửa và nhúng vào phần mềm. OFL cấm cụ thể việc bán bản thân phông nhưng cho phép đóng gói trong ứng dụng. Google Fonts cache các tệp phông và tệp CSS theo cùng điều khoản. Để tự host, tải từ fonts.google.com (tải zip) và phục vụ từ tên miền của bạn — bắt buộc để tuân thủ GDPR ở EU vì dùng fonts.googleapis.com chuyển địa chỉ IP của người dùng cho Google.

Vì sao GDPR và luật cookie là mối lo với Google Fonts?

Dùng `fonts.googleapis.com` khiến trình duyệt người dùng gửi yêu cầu HTTP đến máy chủ Google, truyền địa chỉ IP — được coi là dữ liệu cá nhân theo GDPR Điều 4. Phán quyết tháng 1/2022 của Tòa án vùng Munich (3 O 17493/20) cho rằng nhúng Google Fonts mà không có sự đồng ý của người dùng vi phạm GDPR, bồi thường 100 €. Tự host loại bỏ hoàn toàn rủi ro pháp lý. Công cụ như `google-webfonts-helper` (gwfh.mranftl.com) tạo CSS và tải WOFF2 để tự host. Luôn kiểm tra luật bảo mật của khu vực pháp lý và ghi rõ cơ sở pháp lý trong chính sách bảo mật nếu vẫn dùng CDN.

Tôi có thể dùng phông biến đổi từ Google Fonts không?

Có — Google Fonts lưu trữ hơn 200 phông biến đổi gồm Inter, Recursive, Source Sans 3, Open Sans, Roboto Flex và Newsreader. Yêu cầu phông biến đổi bằng cú pháp `:[email protected]` trong URL: `https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap`. CSS dùng `font-weight: 100` đến 900 (hoặc bất kỳ giá trị nào ở giữa) mà không cần tải tệp riêng — tệp biến đổi chứa tất cả trọng lượng đã nội suy. Hỗ trợ trình duyệt rất tốt: Chrome 62+, Firefox 62+, Safari 11+. Một số phông cũng cho trục chiều rộng (`wdth`), nghiêng (`ital`) và kích thước quang học (`opsz`) qua `font-variation-settings`.

Khác biệt giữa Google Fonts và Adobe Fonts (trước đây Typekit) là gì?

Google Fonts miễn phí, mã nguồn mở, host trên CDN của Google và gồm khoảng 1.500 họ. Adobe Fonts (trước Typekit) đi kèm gói Creative Cloud (20-60 USD/tháng), host khoảng 25.000 họ gồm các kiểu cao cấp kinh điển (Helvetica, Futura, Garamond) và cho đồng bộ máy bàn qua ứng dụng Creative Cloud. Adobe Fonts có giấy phép nghiêm hơn (không tự host, phải nhúng thẻ `<script>` của Adobe), còn Google Fonts cho tự host hoàn toàn theo OFL. Cho thiết kế thương mại cần kiểu chữ cao cấp, Adobe thắng; cho phông web miễn phí, mã nguồn mở, tải nhanh, Google Fonts thắng. Nhiều trang dùng cả hai.