Trình xem Google Fonts

Tìm kiếm và xem trước Google Fonts. Tìm phông chữ hoàn hảo cho các dự án web của bạn và xem chúng trông như thế nào trong thời gian thực.

Tìm kiếm phông chữ

Tìm kiếm hoặc lọc các phông chữ mong muốn của bạn.

Chỉ hiển thị phông chữ tiếng Hàn

Danh mục

Chọn một phông chữ để bắt đầu xem trước

📚 Hướng dẫn đầy đủ về Google Fonts

Tìm hiểu cách sử dụng Google Fonts hiệu quả

🎨🎨 Google Fonts là gì?

Google Fonts là một dịch vụ phông chữ web miễn phí do Google cung cấp.

Hơn 1.400 họ phông chữ mã nguồn mở
Giấy phép miễn phí cho mục đích thương mại
Phân phối toàn cầu qua CDN nhanh
Hỗ trợ nhiều ngôn ngữ và hệ thống chữ viết
Tối ưu hóa cho thiết kế web đáp ứng

⚡⚡ Cách sử dụng phông chữ web

1. Sử dụng trong HTML

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

2. Áp dụng trong CSS

body {
  font-family: 'Noto Sans KR', sans-serif;
}

🚀🚀 Mẹo tối ưu hóa hiệu suất

Sử dụng font-display: swap để ngăn FOIT
Sử dụng preconnect để giảm thời gian tra cứu DNS
Chỉ tải các trọng số phông chữ cần thiết
Giới hạn các bộ ký tự bằng tham số subset
Thiết lập các phông chữ dự phòng cục bộ

Ví dụ tải tối ưu:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean" rel="stylesheet">

📱📱 Kiểu chữ đáp ứng

Cài đặt để có khả năng đọc tối ưu trên các thiết bị khác nhau:

/* 반응형 폰트 크기 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.6;
}

/* 디바이스별 폰트 스택 */
.font-stack {
  font-family: 
    'Noto Sans KR', 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    sans-serif;
}

모바일: 16px 이상 권장
태블릿: 18px 이상 권장
데스크톱: 20px 이상 권장

🎯🎯 Hướng dẫn chọn phông chữ

Phông chữ được đề xuất theo cách sử dụng:

Văn bản chính: Noto Sans KR, Spoqa Han Sans
Tiêu đề: Noto Serif KR, Gowun Dodum
Mã: Fira Code, JetBrains Mono
Trang trí: Jua, Gamja Flower

Tiêu chí lựa chọn:

Tính nhất quán với nhận diện thương hiệu
Khả năng đọc và khả năng tiếp cận
Phạm vi hỗ trợ đa ngôn ngữ
Hiệu suất tải

🔧🔧 Sử dụng nâng cao

Sử dụng phông chữ biến đổi:

/* Variable Font 로드 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 동적 weight 조절 */
.dynamic-weight {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight, 400);
  font-variation-settings: 'wght' var(--font-weight, 400);
}

Sử dụng thuộc tính tùy chỉnh CSS:

:root {
  --font-primary: 'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-primary); }
code { font-family: var(--font-mono); }

🛡️🛡️ Những cân nhắc về khả năng tiếp cận

Tỷ lệ tương phản đủ: WCAG 4.5:1 trở lên
Khoảng cách dòng phù hợp: Nên dùng 1.4~1.6
Cỡ chữ dễ đọc: tối thiểu 16px
Thân thiện với người mắc chứng khó đọc: xem xét OpenDyslexic, v.v.

Ví dụ CSS dễ tiếp cận:

.accessible-text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

🔍🔍 Gỡ lỗi và kiểm thử

Xác minh tải phông chữ:

Kiểm tra các tệp phông chữ trong tab Mạng của DevTools
Kiểm tra các phông chữ thực tế được áp dụng trong các kiểu đã tính toán
Kiểm tra hành vi font-display

Các công cụ đo lường hiệu suất:

Google PageSpeed Insights
WebPageTest
Kiểm tra tối ưu hóa phông chữ Lighthouse

폰트 fallback 테스트:

/* 네트워크 차단 시 fallback 확인 */
font-family: 'Custom Font', 
             'Apple SD Gothic Neo', 
             'Malgun Gothic', 
             sans-serif;